Getting started

For AI coding agents.

BR-UI was built with AI agents in mind. Give your LLM the URL of this registry and it can install + compose UI in seconds. Below: the exact prompt fragments that get you a high-quality result.

Tell your agent where the registry lives

Paste this at the top of your conversation:

We're using the BR-UI design system. The shadcn registry is at:
  https://br-design-system2.vercel.app/r/

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

Available items: br-tokens, br-component-styles, br-icons, br-theme-provider,
br-primitives, br-specimen, br-section-head, br-topbar, br-hero, br-brand-card,
br-tweaks-panel, br-charts, br-ui-all.

Constraints when generating UI:
- All colors via CSS vars (--accent, --text, --surface-1, …). NEVER hex.
- BR primitives: Button, Card, Field, Input, Textarea, Select, Checkbox, Radio,
  Switch, Slider, Stepper, Avatar, Badge, Chip, Table, Tabs, Sidebar, Alert,
  Banner, Dialog, Sheet, Drawer, Tooltip, Dropdown — all from @/components/br/primitives.
- Eyebrows in font-meta uppercase. Display titles in font-display (Clash).
- One accent moment per visible block. Destructive ink IS accent (no second red).
- Three variants live in parallel; use data-variant=A|B|C on <html>.

Pre-built prompts

"Build a dashboard for me"

Compose a workspace dashboard using BR-UI:
- 240px <Sidebar> with WORKSPACE / FINANCE / STUDIO sections.
  Use <BrandCard compact /> as the sidebar foot.
- Sticky topbar (use <Topbar>) with breadcrumbs + search + accent avatar.
- Page header: § Q… eyebrow + display-l title + sub-line + ghost actions on right
  + primary "New …" on far right.
- 4 <StatCard> in a 4-col grid (label, value, trend, sparkline).
- Underline tabs (All / Active / Paused / …) then <Table> with Avatar/Badge cells.

"Build a sign-in screen"

Two-pane sign-in:
- LEFT (50%) — dark editorial aside. radial-gradient of --accent + linear-gradient
  to --text + grid mask. Brand at top, big display-m "Headline, with em.accent
  emphasis" middle, quote + signature + 3 mini-stats at the bottom.
- RIGHT (50%) — surface-flat. § Welcome back eyebrow + display-l title + sub.
  Two provider buttons (Google + GitHub) in 2-col grid, "or with email" divider,
  <Field> Email + Password with eye-toggle + Forgot link. Keep-me-signed-in
  checkbox + ⌘↩ hint. Full-width primary "Sign in →". Terms footer + status strip.

"Build a marketing landing"

Long-scroll editorial layout:
- <Hero> at top — display-xxl headline (one word in accent) + lede + Now-Showing block.
- Below: Specimen sections — Foundations (color/type/elevation), Components
  (one <Specimen> per atom), Examples, Colophon.
- Wrap sections in <Section> with <SectionHead idx eyebrow title lede /> at top.

What NOT to ask your agent to do

- Add new colors outside accent + ink + surface ramps.
- Use drop-shadows in variant C (it's hairline-only).
- Apply backdrop-filter to <text>. Only surfaces.
- Replace Clash Display with another display font. The brand is Clash.
- Add a destructive red. Destructive = accent in this system.
- Hardcode hex colors. Always var(--token).

The DESIGN.md brief

A full 9-section brief lives at the repo root as DESIGN.md — paste that into Claude Design or any agent for the complete design language.