Let's begin
Everything you need to go from zero to a working BoardUI project, on one page: what the system is, how to install it, how your AI agent fits in, and where color and type come from.
Why BoardUI
You own the source
Components are copied into your project as plain React + Tailwind files. No runtime package, no lock-in, nothing you cannot open and edit.
Built for AI agents
An MCP server installs components on request, and always-on design rules keep your agent on the token system instead of inventing its own.
Accessible by default
Every form component builds on React Aria: labels, focus management, keyboard behavior, and ARIA wiring come included.
Designed in Figma first
Every component starts as a finished Figma frame and lands in code pixel for pixel, carried by 400+ design tokens.
Dark mode built in
Semantic tokens flip automatically under the .dark class. You never write a dark: override or a raw hex value.
Data-dense from day one
17 chart cards, dashboard blocks, and 8 full-page templates, made for products where the data is the interface.
Installation
One command sets up any React + Tailwind CSS v4 project: runtime dependencies, theme tokens, global styles, the cx utility, and the always-on agent design rules.
npx boardui@latest initThen add components as you need them; internal dependencies and npm packages resolve automatically:
npx boardui@latest add button select date-pickerMCP server
BoardUI speaks MCP: connect your agent once and it browses all 72 components with real usage examples, sets up your project, and writes the source files in. Pro unlocks in the same chat with your license key.
Free and BoardUI Pro
Free
48 components and blocks: buttons, inputs, tables, dropdowns, date pickers, the sidebar, auth cards, plus the full token and type system. MIT licensed, unlimited projects, installable by CLI, MCP, or copy-paste.
Color
Every color rides a semantic token for text, surfaces, borders, icons, and charts, so components read as one system and dark mode is automatic. The accent ramp drives CTAs and selection states, and can be re-tinted to your brand in one override.
The full token referenceTypography
The Figma type scale ships as composite utilities: each sets size, weight, line-height, and letter-spacing together, so type is picked, never assembled from text-sm font-medium fragments.
Questions? Ask on Discord and we answer in the open, usually the same day.