BoardCN

Introduction

BoardCN is an open-source collection of 85 React components, charts, and templates built on React Aria and Tailwind CSS v4, and designed in Figma.

What is BoardCN?

BoardCN is a component system for interfaces that do real work: dashboards, data tables, settings surfaces, and the agentic patterns that come with AI products — composers, thinking states, progress trees, and usage meters.

It is distributed as a shadcn registry rather than an npm package. You run the CLI, and it writes TypeScript files into your project. From that point the code is yours.

What's inside

  • 36 base primitives — buttons, inputs, selects, dropdowns, tables, tabs, date pickers, and the rest of the vocabulary.
  • 16 application blocks — sidebar, data table, settings modal, notification center, auth card, composer, calendar.
  • 18 chart cards — area, line, combo, funnel, radar, radial, sankey, scatter, heatmaps, and activity rings.
  • 6 full-page templates — AI chat, image generation, profile, plus home, marketing, and medical dashboards.
  • 400+ design tokens across color, typography, radii, and shadows, in light and dark.

Tech stack

  • React 19 with the modern ref prop and no forwardRef boilerplate.
  • React Aria Components for focus management, keyboard interaction, and ARIA.
  • Tailwind CSS v4 with CSS-first theming — no tailwind.config.js.
  • Recharts for charts, TanStack Table for the data table, and Motion for animation.

Everything is free

There is no paid tier, no license key, and no gated components. Every item in the catalog — including all 6 templates and all 18 charts — is MIT licensed. If you find it useful, star the repository.

Source, not a dependency

Component libraries hide their markup behind a version number. When you need a different layout or one more state, you either fight the API or fork the package.

BoardCN gives you the files. Restyle them, delete the parts you do not use, rename the props — nothing upstream breaks, because there is no upstream at runtime. The registry is dependency-aware, so installing one block pulls exactly the primitives it imports and nothing else.

Next steps

  • Installation — wire up the registry in Next.js, Vite, React Router, or Astro.
  • Components — browse the full catalog.
  • Theming — re-tint the system with eleven variables.