Skip to content
1.5k

Next.js

Set up RetroUI in a Next.js project.

1. Create your project

Create a new Next.js app, or skip this step to use an existing one:

pnpm create next-app@latest my-app --typescript --tailwind --app

2. Run the init

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

pnpm dlx shadcn@latest init

3. Add the RetroUI registry

Add the RetroUI registries to your components.json:

components.json
{
  "registries": {
    "@retroui": "https://retroui.dev/r/radix/{name}.json",
    "@retroui-base": "https://retroui.dev/r/base/{name}.json"
  }
}

4. Add the fonts & theme

Follow the Fonts & Theme steps to get the signature RetroUI look — Archivo Black headings, Space Grotesk body text, and the neobrutalist color + shadow tokens.

5. Add a component

pnpm dlx shadcn@latest add @retroui/button

Then import and use it:

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

That's it 🚀 — add the Radix or Base UI variant of any component the same way.