Getting started

Installation

BR-UI ships as a shadcn-compatible registry. Any project that has shadcn initialized can install individual components or the entire kit with one command.

Prerequisites

You need a Next.js (or Vite + React) project with Tailwind CSS v4 and shadcn initialized:

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

Install the whole kit

The br-ui-all bundle pulls in tokens, component styles, and every primitive + pattern:

npx shadcn@latest add https://br-design-system2.vercel.app/r/br-ui-all.json

This creates the following structure in your project:

src/
├── styles/
│   ├── br-tokens.css          ← design tokens (variants, themes, accent)
│   └── br-components.css      ← styles for all BR primitives
└── components/br/
    ├── icons.tsx              ← lucide re-exports + BR icons (Logo, Google, Github)
    ├── theme-provider.tsx     ← <BRThemeProvider>, useBRTheme
    ├── primitives.tsx         ← Button, Card, Input, Badge, Table, Dialog, …
    ├── specimen.tsx           ← <Specimen> showcase wrapper
    ├── section-head.tsx       ← <Section>, <SectionHead>
    ├── topbar.tsx             ← <Topbar>
    ├── hero.tsx               ← <Hero>
    ├── brand-card.tsx         ← <BrandCard>
    ├── tweaks-panel.tsx       ← <TweaksPanel>, <TweaksTrigger>
    └── charts.tsx             ← AreaChart, BarChart, LineChart, DonutChart, RadarChart

Wire the CSS

Add the imports to the very top of your globals.css (before @import "tailwindcss"):

@import url("https://api.fontshare.com/v2/css?f[]=clash-display@300,400,500,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fira+Sans+Condensed:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap");

@import "tailwindcss";
@import "../styles/br-tokens.css";
@import "../styles/br-components.css";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

Wire the provider

Wrap your app with BRThemeProvider so the tweaks panel + keyboard shortcuts work:

// app/layout.tsx
import "./globals.css";
import { BRThemeProvider } from "@/components/br/theme-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-variant="A" data-theme="light" data-glass="subtle">
      <body>
        <BRThemeProvider>{children}</BRThemeProvider>
      </body>
    </html>
  );
}

Install individual pieces

If you only want one component:

# just the tokens
npx shadcn@latest add https://br-design-system2.vercel.app/r/br-tokens.json

# just the button (pulls tokens + styles automatically)
npx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

# just the topbar (pulls primitives + icons + theme-provider)
npx shadcn@latest add https://br-design-system2.vercel.app/r/br-topbar.json

Use it

import { Button, Card, Field, Input } from "@/components/br/primitives";
import { Arrow } from "@/components/br/icons";

export default function Page() {
  return (
    <div className="app">
      <main className="container-br" style={{ padding: "64px 0" }}>
        <h1 className="display-l">Your editorial product.</h1>
        <Button variant="primary" iconRight={<Arrow size={14} />}>
          Start a project
        </Button>
      </main>
    </div>
  );
}