Skip to content
1.6k

Next.js

Set up Neobrutalism.com in a Next.js project — init the shadcn CLI, add the theme, install your first component.

1. Create your project

Create a new Next.js app, or skip this step if you're adding Neobrutalism.com to an existing one:

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. Run the init

Initialize shadcn in your project. This creates components.json and wires up your paths and Tailwind:

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

3. Add the fonts & theme

Follow the Fonts & Theme steps — Archivo Black headings, Space Grotesk body, and the color + shadow tokens. Five minutes, one CSS file.

4. Add a component

Install straight from the registry URL — Radix and Base UI variants live at /r/radix/ and /r/base/ respectively:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

Then import and use it:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Every other component installs the same way — each component page shows the exact URL for both variants.