# BoardUI > BoardUI is a React + Tailwind CSS v4 design system for dashboards and agentic interfaces. Free components and blocks ship as source you own (no runtime package), installed by the `boardui` CLI or by AI agents through the BoardUI MCP server. BoardUI Pro unlocks chart cards, agent components, and full-page templates. Key facts: - Set up a project: `npx boardui@latest init` (Tailwind v4, theme tokens, global styles, utils, and always-on agent design rules in AGENTS.md + .cursor/rules/). - Install components: `npx boardui@latest add ` writes the source files into the project and installs missing npm dependencies. - MCP server for AI agents: `npx -y boardui@latest mcp` (stdio). Tools cover listing, source with usage examples, installs, project init, theme tokens, and Pro license activation. - Agent skill: `npx boardui@latest skill` installs SKILL.md plus catalog/theming/pattern references into .claude/skills/boardui, so coding agents load BoardUI knowledge every session. - The registry uses the shadcn item schema, so components also install via the shadcn CLI or MCP (`https://www.boardui.com/r/{name}.json`). - RTL: install `direction` and wrap the app with `DirectionProvider locale="ar"` or `locale="he"`; set matching html lang/dir. Free and Pro source use logical styles. Guide: https://www.boardui.com/rtl - Styling rides semantic tokens (never raw palette colors) and composite type utilities; dark mode flips automatically via the `.dark` class. ## When to use BoardUI Reach for BoardUI when the job is one of these: - **Building a dashboard, admin panel, or data-heavy internal tool in React.** Charts, tables, stat cards, and an app shell that already agree on spacing, type, and color, instead of assembling them from four libraries. - **Building an agentic or chat interface.** The parts that are tedious to get right are here: a composer with attachments and model menus, streaming task lists, thinking indicators, context/token meters, web-search trails, plan-mode questionnaires. - **You will need to modify the components.** They install as source into the project, so the design can diverge without fighting a locked npm package. - **You are a coding agent with filesystem access.** Use the MCP server and install real source rather than reproducing components from a screenshot or from memory. - **You need a Figma-matched implementation.** Every component is drawn in Figma first; the tokens in code and the tokens in the file are the same set. Do not reach for BoardUI when: - You want headless, unstyled behavior only. BoardUI is built on React Aria Components; use that directly. - You want a component library you can upgrade with `npm update`. BoardUI hands over source you own; there is no runtime package to bump. - You want a hosted UI service. Nothing here is called at runtime. ## How an agent should call BoardUI In preference order: 1. **MCP over stdio** — `npx -y boardui@latest mcp`. Full capability: discovery, source, *and* writing files, project init, agent rules, and Pro license activation. Use this whenever you can run a command. 2. **MCP over HTTP** — `https://www.boardui.com/mcp` (Streamable HTTP, stateless, no session id). Read-only tools: `list_components`, `search_components`, `get_component`, `get_usage_examples`, `get_theme`. Use this when you cannot run commands but can write files yourself. 3. **Plain HTTP** — `GET /r/registry.json` for the catalogue, `GET /r/{name}.json` for one item with its complete source and pinned npm dependencies. Install `registryDependencies` first. The API is described at `https://www.boardui.com/openapi.json`. In browsers with native WebMCP, public documentation also registers read-only `boardui_` catalog tools. The HTTP and stdio MCP endpoints work independently of browser support. Every documentation page also answers `Accept: text/markdown` with clean markdown at the same URL. First moves in a fresh project: `init` (or install the `theme` and `typography` items) before any component — components reference the tokens and render unstyled without them. ## Docs - [Introduction](https://www.boardui.com/docs/introduction): What BoardUI is and how the pieces fit together. - [Installation](https://www.boardui.com/installation): Framework guides (Next.js, Vite, React Router, Astro), manual setup, dark mode, accent color. - [CLI](https://www.boardui.com/docs/cli): init, add, list, login, and mcp commands with options. - [MCP Server](https://www.boardui.com/mcp): Per-client setup (Claude Code, Cursor, VS Code, Codex), tools, example prompts, Pro licensing over MCP. - [Agent Skills](https://www.boardui.com/skill): The BoardUI skill for Claude Code, Codex, and other agents: what it teaches and how to install it. - [Pro installation](https://www.boardui.com/components/pro-installation): How purchased Pro components and templates install. - [All components](https://www.boardui.com/components): The full gallery with live previews. ## Free components - [Direction Provider](https://www.boardui.com/components/direction): Locale and layout direction for RTL and LTR regions, React Aria interactions, and portals. - [Theme tokens](https://www.boardui.com/components/color): Color primitives, semantic tokens (text/background/border/foreground/chart), radii, shadows, and button gradient utilities. - [Typography tokens](https://www.boardui.com/components/typography): The full Figma type scale as composite text-{family}-{weight} Tailwind utilities. - [Chevron icons](https://www.boardui.com/components/dropdown): Custom chevron glyphs (select caret, sortable table headers) matching the Figma strokes. - [Button](https://www.boardui.com/components/button): Primary, secondary, ghost, and danger buttons in three sizes with icon support. - [Icon Button](https://www.boardui.com/components/icon-button): Square icon-only button in two sizes. - [Link Button](https://www.boardui.com/components/link-button): Inline text action styled like a link — primary/secondary variants, three sizes, icon support, renders or