Canvas UI SDK

A themeable React component library with a shadcn-style CLI for copying components into consumer projects, a visual theme editor, and an MCP server for AI editors.

Installation

npm install canvas-ui-sdk

CLI

Components are copied as editable source files into your project. Dependencies are auto-resolved and npm packages auto-installed.

# See all 140+ available components
npx canvas-ui list

# Copy components into your project
npx canvas-ui add <component-name>

# Examples:
npx canvas-ui add button                 # Copies button + utils
npx canvas-ui add dashboard-shell        # Copies shell + sidebar + header + 15 deps
npx canvas-ui add standard-data-table    # Copies table + pagination + deps

Then import from local paths:

import { DashboardShell } from "@/components/layout/dashboard-shell";
import { StandardDataTable } from "@/components/blocks/data-tables/standard-data-table";
import { Button } from "@/components/ui/button";

CSS Setup

Add these imports to your globals.css (Tailwind v4):

@import "tailwindcss";
@import "canvas-ui-sdk/tailwind";
@import "canvas-ui-sdk/styles";
@source "../../node_modules/canvas-ui-sdk/dist";

• canvas-ui-sdk/tailwind maps design tokens to Tailwind's semantic color names (bg-muted, text-primary, etc.)
• canvas-ui-sdk/styles loads the design system's CSS variables (colors, typography, spacing, etc.)
• @source tells Tailwind to scan the SDK's compiled output for utility classes — adjust the relative path based on your globals.css location

CSS Variables

Override design tokens in your globals.css:

:root {
  --canvas-primary: #16a34a;
  --canvas-primary-dark: #15803d;
  --canvas-primary-foreground: #ffffff;
}

See styles/tokens.reference.css for the full list of available CSS variables.

MCP Server

Connect the MCP server so your AI editor can discover all components, templates, and design tokens.

Claude Code

Add a .mcp.json to your project root:

{
  "mcpServers": {
    "canvas-ui-sdk": {
      "command": "npx",
      "args": ["canvas-ui-mcp"]
    }
  }
}

Or via CLI: claude mcp add canvas-ui-sdk npx canvas-ui-mcp

Cursor

Add a .cursor/mcp.json to your project root:

{
  "mcpServers": {
    "canvas-ui-sdk": {
      "command": "npx",
      "args": ["-y", "--package=canvas-ui-sdk", "canvas-ui-mcp"]
    }
  }
}

Windsurf

Add an MCP server in Windsurf settings (Cascade > MCP) with command npx and args -y --package=canvas-ui-sdk canvas-ui-mcp.

Alternative (direct node invocation)

If npx doesn't work in your environment:

{
  "mcpServers": {
    "canvas-ui-sdk": {
      "command": "node",
      "args": ["node_modules/canvas-ui-sdk/mcp/dist/index.js"]
    }
  }
}

AI Instructions

Copy the SDK instructions file into your project so your AI editor knows how to use the CLI, design tokens, and component patterns:

| Editor | Command | |--------|---------| | Claude Code | cp node_modules/canvas-ui-sdk/prompts/CLAUDE.md ./CLAUDE.md | | Cursor | cp node_modules/canvas-ui-sdk/prompts/.cursorrules ./.cursorrules | | Windsurf | cp node_modules/canvas-ui-sdk/prompts/.windsurfrules ./.windsurfrules | | GitHub Copilot | mkdir -p .github && cp node_modules/canvas-ui-sdk/prompts/copilot-instructions.md ./.github/copilot-instructions.md |

Live Theme Editor

The <ThemeDrawer> component provides a visual editor for customizing colors, typography, button sizes, input styles, and branding in real-time. When you're happy with your theme, bake it into source code with prompts/bake-theme.md.

Components

UI Primitives

Button, Input, Select, Checkbox, Switch, Dialog, Popover, Dropdown, Avatar, Tabs, Tooltip, and more.

Blocks

Data tables, social feeds, charts, metric tiles, chat widgets, forms, calendars, and more.

Layout Shells

DashboardShell, IconSidebarShell, DoubleSidebarShell, StandardPageShell, AccountSettingsShell, MultistepShell, MobileMenuShell.

Development

npm install    # Install dependencies
npm run build  # Build dist + registry + CLI
npm run dev    # Watch mode

License

MIT