Installation

Requirements

• React 19 or later
• Tailwind CSS v4 — CSS-first config, no tailwind.config.js needed
• TypeScript with an @/* path alias

1. Point the CLI at the registry

Add the @boardcn namespace to your components.json. The aliases matter: BoardCN imports its own primitives through them, so they must resolve in your project.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/base",
    "lib": "@/utils",
    "utils": "@/utils/cx",
    "hooks": "@/hooks"
  },
  "registries": {
    "@boardcn": {
      "url": "https://boardcn.dev/r/{name}.json"
    }
  }
}

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/base",
    "lib": "@/utils",
    "utils": "@/utils/cx",
    "hooks": "@/hooks"
  },
  "registries": {
    "@boardcn": {
      "url": "https://boardcn.dev/r/{name}.json"
    }
  }
}

2. Install the foundation

The boardcn item installs the design-system layer — theme tokens, the type ramp, global styles, and the cx helper — that every component expects.

npx shadcn@latest add @boardcn/boardcn

npx shadcn@latest add @boardcn/boardcn

Then import the stylesheet once, at your app's entry. It pulls in theme.css and typography.css itself.

import "@/styles/globals.css";

import "@/styles/globals.css";

3. Add components

npx shadcn@latest add @boardcn/button @boardcn/select @boardcn/date-picker

npx shadcn@latest add @boardcn/button @boardcn/select @boardcn/date-picker

Each item pulls only what it imports. Installing a template brings the blocks, charts, and primitives it composes — without duplicating any shared file.

npx shadcn@latest add @boardcn/home-dashboard

npx shadcn@latest add @boardcn/home-dashboard

Framework setup

1. 1. Next.js (recommended)

   create-next-app already gives you TypeScript, Tailwind, and the @/* alias, so there is nothing else to wire up.

   npx create-next-app@latest my-app

   npx create-next-app@latest my-app

2. 2. Vite

   Install the Tailwind plugin, then declare the alias in both vite.config.ts and your tsconfig so the bundler and the type checker agree.

   npm install -D tailwindcss @tailwindcss/vite

   npm install -D tailwindcss @tailwindcss/vite

   import path from "node:path";
   import tailwindcss from "@tailwindcss/vite";
   import react from "@vitejs/plugin-react";
   import { defineConfig } from "vite";
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
     resolve: {
       alias: { "@": path.resolve(import.meta.dirname, "./src") },
     },
   });

   import path from "node:path";
   import tailwindcss from "@tailwindcss/vite";
   import react from "@vitejs/plugin-react";
   import { defineConfig } from "vite";
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
     resolve: {
       alias: { "@": path.resolve(import.meta.dirname, "./src") },
     },
   });

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

3. 3. React Router and Astro

   Both work the same way: add the Tailwind v4 plugin, define the @/* alias, and import globals.css once in the root layout. For Astro, render BoardCN components inside a React island — they are interactive.

Static assets

Two items ship SVGs alongside their source: settings-modal writes four plugin icons into public/ai-chat/. The CLI copies them for you, but they are referenced by absolute path — if you serve static files from somewhere other than public/, update those paths in components/blocks/settings/settings-storage.tsx.

Next steps

• CLI — the commands in full.
• Agent skill — install the dashboard skill with the Vercel skills CLI.
• Theming — change the accent hue.
• Dark mode — wire up the theme toggle.