# brand-ui > Open-source, source-owned, token-driven React component system built for coding agents and the people who work with them: dashboards, data grids, AI/chat clients, React Flow canvases, maps, editors and the marketing page in front of them. Default look: modern enterprise SaaS, themeable to any brand. Tailwind v4 (CSS-variable tokens) + Radix + React 19. This file is generated from `brand-ui.manifest.json` — the anti-hallucination ground truth. Never hand-edit it. For the live, queryable API, connect the hosted brand-ui MCP at `https://elabs-ai.com/mcp` (nothing to install) and call `info` · `search ` · `docs `; the same tools run locally over stdio with `npx -y @elabs-ai/components-cli mcp`. ## Rules of the road - Semantic tokens only — no raw hex outside `packages/tokens/src/themes.css`. - `forwardRef` + spread `...props` + merge `className` via `cn()`. - Variants via `class-variance-authority`; Radix for overlays/interaction. - Visible focus ring on every interactive element; must read in every theme. - One-way dependency: `tokens → ui/icons → data/ai/flow/charts/marketing/editor`. ## Theme modes (2) dark, light (default) Theming is open: a theme is a stylesheet of semantic tokens, registered with `ThemeProvider` — no fork. Downloadable brand theme families live in the repo's `themes/` directory (each implements every mode above); `themes/README.md` lists them. ## Packages (which package for what) - [@elabs-ai/components-tokens](./llms/tokens.txt) — Semantic CSS-variable themes + ThemeProvider/useTheme. (2 components · 2 exports with their parts, 6 hooks) - [@elabs-ai/components-icons](./llms/icons.txt) — Brand/product-vocabulary icons + BrandLogo (generic glyphs use lucide-react). (32 components · 32 exports with their parts, 0 hooks) - [@elabs-ai/components-ui](./llms/ui.txt) — Foundation + app UI (Button, Card, Dialog, Tabs, AppShell, …). (141 components · 403 exports with their parts, 20 hooks) - [@elabs-ai/components-data](./llms/data.txt) — TanStack DataTable, FilterBar, SearchInput, FacetFilter, ColumnPicker. (16 components · 19 exports with their parts, 1 hooks) - [@elabs-ai/components-ai](./llms/ai.txt) — ChatShell, Conversation, Message, PromptInput, Tool, Reasoning, citations. (75 components · 439 exports with their parts, 14 hooks) - [@elabs-ai/components-flow](./llms/flow.txt) — Branded React Flow canvas, nodes, edges, controls, inspector. (23 components · 35 exports with their parts, 8 hooks) - [@elabs-ai/components-maps](./llms/maps.txt) — MapLibre GL maps: MapCanvas, markers, popups, controls, routes, arcs, GeoJSON, clusters. (18 components · 23 exports with their parts, 7 hooks) - [@elabs-ai/components-charts](./llms/charts.txt) — MetricCard, MetricGrid, ChartCard, ChartFrame (expand/flip/download). (105 components · 161 exports with their parts, 59 hooks) - [@elabs-ai/components-marketing](./llms/marketing.txt) — Hero, FeatureGrid, UseCaseCard, StatsBand, CTASection, LogoStrip. (8 components · 8 exports with their parts, 0 hooks) - [@elabs-ai/components-editor](./llms/editor.txt) — Token-themed Monaco editor: CodeEditor, DiffEditor, CodeWorkspace. (7 components · 7 exports with their parts, 1 hooks) - [@elabs-ai/components-viewer](./llms/viewer.txt) — FileViewer — any file (image, audio, video, text, code, JSON, CSV, markdown, PDF, docx, pptx, xlsx) via a pluggable adapter registry. (5 components · 14 exports with their parts, 2 hooks) - [@elabs-ai/components-terminal](./llms/terminal.txt) — Terminal surfaces: shell/agent output and coding-agent CLI look-alikes. (17 components · 25 exports with their parts, 1 hooks) - [@elabs-ai/components-process](./llms/process.txt) — Process mining and event-log analysis: process map, variants, cases, conformance — composes flow/charts/data. (26 components · 28 exports with their parts, 7 hooks) ## Entry points - Hosted MCP (no install): `claude mcp add --transport http brand-ui https://elabs-ai.com/mcp` — Streamable HTTP, tools `info` · `search ` · `docs ` · `tokens` · `chart_for` · `a2ui` - CLI over stdio: `npx -y @elabs-ai/components-cli mcp`, or `pnpm add -D @elabs-ai/components-cli` then `pnpm exec brand-ui info` · `… search ` · `… docs ` (the local CLI also has `audit`, which the hosted server cannot run) - Claude Code / Cowork plugin (skills, tracks the repo): `/plugin marketplace add mreimitz/elabs-components` then `/plugin install brand-ui` - New app in one command: `npx -y @elabs-ai/components-cli create --template dashboard` (data-app · ai-assistant · flow-workspace · settings · marketing) — a runnable Vite + React app with tokens, Tailwind `@source` lines and `ThemeProvider` wired - Generative UI (an agent DESIGNS a screen): emit an A2UI surface — JSON of catalog types (`npx -y @elabs-ai/components-cli a2ui catalog`, `… a2ui validate `, or the MCP `a2ui` tool) — and render it with `` from `@elabs-ai/components-ai` - Templates (whole screens, copy-own): https://elabs-ai.com/llms/templates — every template's scenario, the views it shows, the blocks and packages it is made of, and the one command that copies it in - Docs site: https://elabs-ai.com/storybook/ (Storybook — every component, live, in every theme) - Discovery: https://elabs-ai.com/.well-known/mcp.json - Manifest: `brand-ui.manifest.json` (machine-readable ground truth) - Registry (copy-own): `npx shadcn@latest add https://elabs-ai.com/r/.json` (or self-host — `pnpm registry:build`, or copy from `registry/blocks//`)