Registry installation
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.
Reviewed 2026-09-01
Prepare the target application
Run the command inside the application that owns your shadcn configuration. Confirm its component alias, TypeScript mode, CSS entry point, and package manager before installation. The CLI uses that project configuration to decide where source files belong.
Commit or stash unrelated work first if you need a clean install diff. The CLI writes source and can add package dependencies, so a clean comparison is the fastest way to see what changed.
Use the canonical registry URL
Copy the command from the component’s Menace UI page. These examples install Animated Tabs and Toast Stack from their production registry documents:
npx shadcn add https://menaceui.com/r/menace-tabs.json
npx shadcn add https://menaceui.com/r/menace-toast-stack.jsonA registry document can declare npm dependencies, other registry items, and multiple source files. Let the CLI resolve that graph. Do not download only the visible TypeScript file and assume its styles or theme tokens are optional.
Review the resulting diff
- Confirm source landed under the configured component alias.
- Check package and lockfile changes for declared dependencies.
- Locate CSS Modules or theme token files added with the component.
- Resolve import aliases using the target application’s conventions.
- Reject unexpected overwrites before continuing.
Menace UI components are copied into your codebase. That makes the implementation editable, but it also makes your repository responsible for later customizations and upgrades.
Wire the component at the right boundary
Check the installed file for a "use client" directive. Components that use state, events, browser APIs, or Motion belong in a client boundary. Keep the surrounding route and static content on the server when they do not need those capabilities.
Import any required global token stylesheet once. CSS Modules are imported by their component file. The server and client boundary guide covers the distinction in more detail.
Verify before customization
- Run the target application’s formatter, typecheck, and tests.
- Render the default example before changing tokens or markup.
- Replay keyboard, focus, disabled, and error states.
- Enable reduced motion and inspect every animated state change.
- Test the component at the route’s narrowest supported width.
Start from the component catalog so the install command and the public component documentation refer to the same registry export.