Implementation library
React, Next.js, and UI Implementation Guides
Use practical Menace UI guides for registry installation, React motion, reduced-motion behavior, client boundaries, template evaluation, and source customization.
Choose a guide by implementation task
Each guide is tied to current Menace source and calls out the boundary between demonstrated behavior and work the consuming team still owns.
- Build an Aurora Button in React and Tailwind Projects
Install the Aurora Button source, choose a primitive adapter, preserve its token styles, and integrate the component into a React or Tailwind project.
- Animated Tabs in Next.js with Reduced Motion
Add keyboard-operable animated tabs to a Next.js route, keep state inside a client boundary, and provide an instant reduced-motion path.
- Build a React Toast Stack with Accessible Announcements
Install and configure the Menace Toast Stack, then verify live announcements, timers, actions, focus behavior, and reduced-motion exits.
- Motion Component Performance Checklist for React
Measure animated React components, reduce unnecessary client work, pause offscreen effects, and preserve a usable reduced-motion experience.
- Install Menace UI Components with the shadcn CLI
Use the shadcn CLI with a Menace UI registry URL, inspect the files and dependencies it adds, and verify the component in your application.
- RSC vs Client Components for Animated UI
Choose a React Server Component or client component boundary for animated UI based on state, browser APIs, event handling, and shipped JavaScript.
- How to Evaluate a Next.js Template Before You Ship
Review a Next.js template for route coverage, responsive behavior, accessibility, performance, dependencies, source ownership, and asset rights.
- Customize Source-Ready Components in Tailwind Projects
Adapt installed Menace UI source inside a Tailwind project while preserving component semantics, keyboard behavior, motion fallbacks, and upgrade clarity.