Get Started · Installation

Installation

Brock UI uses the shadcn registry format. Components are copied into your project – you own the code. No runtime dependency on a Brock UI package.

Quick start

Add any component to your project with one command:

npx shadcn@latest add https://brockui.com/r/column-chart

Prerequisites

· Next.js 16+ (or React 19+ for other frameworks)
· Tailwind CSS v4
· shadcn CLI: npm i -D shadcn
· A working components.json (run npx shadcn init if missing)

Theme setup

Add the Brock UI accent color to your globals.css. Without it, components render in default grey.

:root {
  --brock-accent: oklch(0.646 0.222 41.116); /* #F54900 — Orange */
}

.dark {
  --brock-accent: oklch(0.646 0.222 41.116);
}

Tailwind v4 token

Expose the variable as a Tailwind token so you can use bg-brock-accent, text-brock-accent and border-brock-accent throughout your project. Add inside your @theme inline block:

@theme inline {
  --color-brock-accent: var(--brock-accent);
}

Customize the accent

One variable controls all accents across every Brock UI component. Change --brock-accent once – every chart, every highlight, every active state updates. We recommend a single, distinct color in OKLCH for predictable behavior across themes.

What you get

· Source files in your repo – fully editable, no black-box package
· Typed props, zero runtime dependencies beyond React and Tailwind
· Dark mode and light mode parity out of the box
· MIT license, no attribution required