Installation

1. Add the styling

Every palette on the styling page is published as a registry style, so the shadcn CLI can set up a project with it in one command.

New project

Scaffold a project that is already themed. This creates components.json, writes the palette and every token the components depend on to globals.css, installs the dependencies and adds the Button component:

Copypnpm dlx shadcn@latest init https://neobrutalism.dev/r/styling/blue.json

Existing project

If you already initialized shadcn, add the styling to the project instead. This merges the palette and tokens into your globals.css:

Copypnpm dlx shadcn@latest add https://neobrutalism.dev/r/styling/blue.json

Manually

Delete the existing styling from your globals.css and paste the CSS from the Manual tab of the Copy dialog on the styling page. Unlike the CLI commands, that CSS already carries your border radius, box shadow and font weight choices.

2. Change the font

Pick a font from the styling page and load it in your project like any other Google font.

3. Install components

Install via Shadcn CLI

On each component page choose your package manager, copy the CLI command to your terminal and you're good to go. If a component page has no CLI command, install the component manually.

Install manually

Below each component's name there's a link to its shadcn docs.

For example, to install the button component, open the button page, follow the shadcn docs link and install the button component like it's shown there. Then come back to the neobrutalism button page and copy the component into your project as components/ui/button.tsx (the default component path) or your custom component path.

Keep in mind that neobrutalism components can have different variants than the default shadcn components.

Other components

If the shadcn docs link is not present on a component's page, just copy the component and read the instructions if there are any.