Installation - neobrutal-ui

#Requirements

Use a React project with Tailwind CSS v4. You also need a components.json file for the shadcn CLI.

#1. Initialize shadcn

Current shadcn projects use Base UI by default. If the CLI asks you to choose a component library, select Base UI.

npx shadcn@latest init

#2. Configure the registry namespace

Add the neobrutal-ui registry to components.json. The CLI replaces {name} with the item you request.

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

The namespace is configured manually until @neobrutal-ui is accepted into the official shadcn registry directory.

#3. Inspect the base item

Review the files, dependencies, and theme variables before installation.

npx shadcn@latest view @neobrutal-ui/neobrutal-ui

#4. Add the base item

Install the base item once per project. It adds the shared CSS variables, Tailwind theme mapping, aliases, and dependencies used by the components.

npx shadcn@latest add @neobrutal-ui/neobrutal-ui

#5. Install components

Install the component you need from the registry.

npx shadcn@latest add @neobrutal-ui/button

You can install several items in one command.

npx shadcn@latest add @neobrutal-ui/button @neobrutal-ui/dialog

Component pages include a direct install command and the source preview. Registry items also declare their npm and registry dependencies, so the CLI can resolve them with the component.

#Direct URL install

The namespace is optional. A registry item can also be installed from its production URL.

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

#Manual install

You can copy source files manually, but install or reproduce the base item first so the design tokens and Tailwind theme mapping exist in your project.

#Updating installed source

Registry items are copied into your repository, so updates are never applied silently. Preview the current registry version before replacing a customized file.

npx shadcn@latest add @neobrutal-ui/button --dry-run

Use --diff to inspect a file-level change. When you have reviewed or backed up local edits, run the command again with --overwrite.

npx shadcn@latest add @neobrutal-ui/button --overwrite