Docs
Quickstart.
From zero to a rendered component in three steps. Setup is minimal, and everything you add is source you own.
Quickstart
Install a component
Run the CLI in your React project. BoardUI copies the component source into your codebase so you own it.
Import and render
The component lands in your components directory. Import it and render like any other React component.
Theme with tokens
Restyle everything from your Tailwind v4 theme. Tokens drive color, radius and spacing, including dark mode.
Requirements
BoardUI is built on a modern, well-supported stack:
- React 19
- Tailwind CSS v4
- React Aria
- TanStack Table
Adding components
Add any component, block or chart by name. The CLI resolves dependencies and writes the source into your project.
$ npx boardui add sidebar
$ npx boardui add chart-line
$ npx boardui add agentic-chat
# components land in your project, ready to edit
Theming with tokens
400+ design tokens map to Tailwind v4 theme variables. Change a value once and it propagates across every component.
@theme {
--color-primary: #2879ff;
--color-accent: #7ccf00;
--radius-card: 0.75rem;
}
Dark mode
Every token ships with dark mode variables. Toggle the class on your root element and the whole system adapts, no per-component overrides needed.
Ready to unlock everything?
Get every Pro component, or join the Discord to ask questions.