Choose the right primitive
Use the adapter that fits your application instead of introducing a second interaction model by accident.
7 min read ArchitectureBuild better interfaces. Keep the source.
Practical field guides for installing, adapting, and shipping Menace UI with confidence.
Start with installation- 01Start
- 02Customize
- 03Ship
01
Install your first component
Add editable Menace source to an existing shadcn project and verify the result before you customize it.
6 min read Getting started02Adapt without losing accessibility
Change the visual system while keeping names, relationships, focus behavior, and state intact.
10 min read Accessibility03Prepare a template for launch
Replace demonstration content, audit local assets, and verify the standalone project before deployment.
12 min read TemplatesImplementation index
Choose a guide by implementation task
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.
Ready to work from source?