Installation

#Requirements

You need a React 19 project with Tailwind CSS v4 and shadcn initialized. UI components work with Next.js and Vite. Page templates target the Next.js App Router.

Run this from your project folder if shadcn is not initialized yet:

npx shadcn@latest init

Choose Base UI if the CLI asks which component library to use.

#Fastest setup

Install the shared base once, then add your first component. Direct URLs work without editing components.json.

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/neobrutal-ui.json
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/button.json --overwrite

The first-button command deliberately replaces the button that shadcn init may have created. Without replacing that file, you may still see the default shadcn button with the new colors. The --overwrite flag replaces the selected component files. Commit or back up an existing customized button before running this first-setup command.

The base provides the colors, borders, shadows, utilities, and global styles used by every neobrutal-ui component.

#Check that it works

Render the installed button in one of your pages:

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button>Click me</Button>;
}

A button with a bold border and hard shadow means the setup worked. You can now browse the component directory and install the pieces you need.

#Existing projects

The shared base changes project-wide styles, so commit your current work before adding it to an existing application. Inspect its changes first:

npx shadcn@latest view https://neobrutal-ui.andongmin.com/r/neobrutal-ui.json

Pay particular attention to global CSS, components.json, dependencies, and your utilities. Component, recipe, and template modules use your configured aliases. Explicit page routes still install into the Next.js App Router. Compositions do not reinstall the base theme.

#Add more components

Each component page includes a copyable install command. For example:

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/dialog.json
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/card.json

The CLI installs required packages and supporting components automatically. For an existing component, review the proposed replacement rather than overwriting your customizations indiscriminately. The initial button replacement is not a requirement to use --overwrite for every subsequent installation.

#Choose a theme

The shared base starts with Mono. Light mode uses cool-white surfaces and graphite actions; dark mode uses cool-charcoal surfaces and pale-silver actions. Chart series retain muted colors instead of becoming indistinguishable shades of gray.

No extra theme command is needed for this default. Install one named theme to use a colorful palette instead:

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/theme-red.json

Use theme-mono.json in the same command to return to the default palette. Install one theme at a time rather than adding every preset together. Both light and dark tokens are included; your application's theme toggle selects the mode with the .dark class.

#Optional: shorter commands

To use shorter commands such as @neobrutal-ui/dialog, merge this entry into the existing registries object in components.json:

{
  "registries": {
    "@neobrutal-ui": "https://neobrutal-ui.andongmin.com/r/{name}.json"
  }
}

npx shadcn@latest add @neobrutal-ui/dialog
npx shadcn@latest add @neobrutal-ui/theme-red

#Templates

Templates install Next.js App Router pages and supporting components. Inspect their target files before adding one to a project that already uses the same routes.

npx shadcn@latest view https://neobrutal-ui.andongmin.com/r/blog-template.json
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/blog-template.json

#Manual installation and updates

The Manual tab shows the source files and required packages. Installed files belong to your application and are not updated automatically. Review proposed changes before overwriting files that you have customized:

npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/button.json --dry-run