# BoardCN > A free, MIT-licensed React design system for agentic interfaces: 36 accessible > primitives on React Aria, 18 chart cards, 16 application blocks, and > 6 full-page templates, styled with Tailwind CSS v4. BoardCN is distributed as a shadcn registry, not an npm package. The CLI copies TypeScript source into the consumer's project, so there is no runtime dependency and no component API to work around — the files can be edited freely. Cursor agents building a dashboard from a dataset should follow the skill at https://boardcn.dev/docs/skills (raw: https://boardcn.dev/skills/boardcn-dashboard/SKILL.md). Consumer agents: ask the user before installing, then use the Vercel skills CLI. Do not copy skill files by hand. npx skills add https://boardcn.dev --skill boardcn-dashboard --agent cursor Zip: https://boardcn.dev/skills/boardcn-dashboard.zip ## Install Install items by absolute URL — no `registries` entry required: npx shadcn@latest add https://boardcn.dev/r/boardcn.json npx shadcn@latest add https://boardcn.dev/r/button.json Item JSON: `https://boardcn.dev/r/{name}.json` Each item declares its dependencies as absolute URLs, so installing a template also installs the blocks, charts, and primitives it composes — without duplicating shared files. ## Requirements - React 19+ - Tailwind CSS v4 (CSS-first config; no tailwind.config.js) - TypeScript with an `@/*` path alias ## Conventions - Components reference semantic tokens (`bg-background-full`, `text-text-primary`), never `dark:` prefixes. Dark mode is a `.dark` class on ``. - Typography utilities are composite and always weighted: `text-body-medium`, `text-title-1-semibold`. There is no bare `text-body`. - Override the eleven `--color-accent-*` variables to re-tint every interactive surface at once. ## Docs - https://boardcn.dev/docs/introduction - https://boardcn.dev/docs/installation - https://boardcn.dev/docs/cli - https://boardcn.dev/docs/skills - https://boardcn.dev/docs/theming - https://boardcn.dev/docs/dark-mode - https://boardcn.dev/docs/colors - https://boardcn.dev/docs/typography ## Catalog (85 items) ### Foundations Design tokens, the cx helper, hooks, and brand marks everything else builds on. - Chevron icons (`chevrons`): Custom chevron glyphs (select caret, sortable table headers) matching the Figma strokes. - cx utility (`cx`): tailwind-merge wrapper aware of BoardCN's composite text styles, plus the sortCx helper. - Global styles (`globals`): Tailwind entry css: dark-mode variant, base resets, component animations, and table styling. Imports theme.css and typography.css. - Logo (`logo`): BoardCN brand marks in square and wide badge variants. - Theme tokens (`theme`): Color primitives, semantic tokens (text/background/border/foreground/chart), radii, shadows, and button gradient utilities. - Typography tokens (`typography`): The full Figma type scale as composite text-{family}-{weight} Tailwind utilities. - useCountUp hook (`use-count-up`): Animated rolling number hook used by chart headline figures. - useDismissOnOutsidePress hook (`use-dismiss-on-outside-press`): Closes React Aria popovers on outside press without swallowing the outside click. ### Templates Full-page layouts wired end to end, ready to drop into a route. - AI Chat (`ai-chat`): Complete responsive AI chat template. - AI Image Generation (`ai-image-generation`): Complete AI image generation template. - AI Profile (`ai-profile`): Complete AI profile template. - Home Dashboard (`home-dashboard`): Complete home dashboard template. - Marketing Dashboard (`marketing-dashboard`): Complete marketing dashboard template. - Medical Profile (`medical-profile`): Complete medical profile template. ### Base Accessible primitives built on React Aria — the vocabulary of every screen. - Announcement (`announcement`): Dismissible announcement card used in the sidebar footer. - Avatar (`avatar`): Image or initials avatar in multiple sizes and tints. - Badge (`badge`): Counter pills and the Kbd shortcut hint. - Breadcrumb (`breadcrumb`): Icon-capable breadcrumb trail. - Button (`button`): Primary, secondary, ghost, and danger buttons in three sizes with icon support. - Button Group (`button-group`): Row of secondary-style buttons fused into one bordered control with hairline dividers and selectable items. - Carousel (`carousel`): Gallery carousel built on CSS scroll-snap: swipe, arrows and a position indicator. - Checkbox (`checkbox`): React Aria checkbox with animated tick and indeterminate state. - Checkbox Card (`checkbox-card`): Bordered selectable card driven by a checkbox. - Chip (`chip`): Status/delta chips in bold and soft variants across the accent palette. - Close Button (`close-button`): Compact dismiss button for banners, modals, and chips. - Date Picker (`date-picker`): Single-date picker with month navigation, built on React Aria. - Date Range Picker (`date-range-picker`): Two-month range picker sharing the date-picker chrome. - Divider (`divider`): Horizontal content divider with single-line, double-line, filled, and aligned variants. - Dropdown (`dropdown`): Composable popover menu (trigger, panel, groups, rows, dividers) built on React Aria — the recipe behind the sidebar team/account menus. - File Upload (`file-upload`): Drag-and-drop file upload with validation, animated progress, and a completion callback. - Icon Button (`icon-button`): Square icon-only button in two sizes. - Input (`input`): Text input with label, hint text, error states, and leading icon support. - Input OTP (`input-otp`): One-time-code field with a monospace box per digit, paste distribution and autofill support. - Kbd (`kbd`): Keyboard shortcut hint pill. - Link Button (`link-button`): Inline text action styled like a link — primary/secondary variants, three sizes, icon support, renders or