Installation

1. Start with a fresh Next.js app

pnpmnpmyarnbun
bunx --bun create-next-app@latest
Copy

2. Clear out the Next.js defaults

Copyrm app/page.tsx app/favicon.ico && rm -rf public/*

Fresh slate. We're building something better than the default landing page anyway.

3. Install shadcn/ui as the foundation

pnpmnpmyarnbun
bunx --bun shadcn@latest init --base-color neutral
Copy

4. Add brodin/ui to your registry

Update your components.json with my registry. This is where the magic happens:

Copy{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@brodin-ui": "https://ui.brodin.dev/r/{name}.json"
  }
}

5. Install the starter template

pnpmnpmyarnbun
bunx --bun shadcn@latest add @brodin-ui/app --yes --overwrite
Copy

This gives you a complete app structure that actually looks good out of the box. No more staring at unstyled components.

6. Set up the typography

Download these fonts and drop them in /public/fonts/:

• iA Writer Quattro
• iA Writer Mono

The shadcn CLI sometimes mangles font files during installation, so manual download is the reliable way.

7. Pick your project logo

Browse the available logos and click any one to copy its install command. Then:

• Run the install command
• Import your chosen logo in app/icon.tsx to replace the placeholder

Every logo has been hand-picked to work perfectly with this design system.

8. Ship it

pnpmnpmyarnbun
bun dev
Copy

That's it. Your app is ready to build on.