canvas-ui-sdk 0.3.12 → 0.3.14

package/README.md

@@ -1,6 +1,6 @@
 # Canvas UI SDK
 
-A comprehensive UI component library with design tokens for building beautiful interfaces.
+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 Claude Code.
 
 ## Installation
 
@@ -8,57 +8,34 @@ A comprehensive UI component library with design tokens for building beautiful i
 npm install canvas-ui-sdk
 ```
 
-## Usage
+## CLI
 
-```tsx
-import { Button, DashboardShell, DataTable } from 'canvas-ui-sdk';
-
-export default function MyPage() {
-  return (
-    <DashboardShell>
-      <Button variant="primary">Click me</Button>
-      <DataTable data={myData} columns={myColumns} />
-    </DashboardShell>
-  );
-}
-```
+Components are copied as editable source files into your project. Dependencies are auto-resolved and npm packages auto-installed.
 
-## CSS Variables
+```bash
+# See all 140+ available components
+npx canvas-ui list
 
-This SDK uses CSS custom properties (variables) for theming. Define these in your project's `globals.css`:
+# Copy components into your project
+npx canvas-ui add <component-name>
 
-```css
-:root {
-  /* Colors */
-  --canvas-primary: #2563eb;
-  --canvas-secondary: #64748b;
-  --canvas-background: #ffffff;
-  --canvas-foreground: #0f172a;
-  --canvas-border: #e2e8f0;
-  
-  /* Typography */
-  --typo-font-primary: 'Inter', sans-serif;
-  --typo-base-size: 16px;
-  
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-  
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-}
+# 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
 ```
 
-See `styles/tokens.reference.css` for a complete list of available CSS variables.
+Then import from local paths:
 
-## Tailwind v4
+```tsx
+import { DashboardShell } from "@/components/layout/dashboard-shell";
+import { StandardDataTable } from "@/components/blocks/data-tables/standard-data-table";
+import { Button } from "@/components/ui/button";
+```
 
-If you're using Tailwind CSS v4, add these imports to your CSS file:
+## CSS Setup
+
+Add these imports to your `globals.css` (Tailwind v4):
 
 ```css
 @import "tailwindcss";
@@ -67,43 +44,53 @@ If you're using Tailwind CSS v4, add these imports to your CSS file:
 @source "../../node_modules/canvas-ui-sdk/dist";
 ```
 
-- `canvas-ui-sdk/tailwind` maps the SDK's design tokens to Tailwind's semantic color names (`bg-muted`, `text-primary`, etc.)
+- `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`:
+
+```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 (Claude Code)
+
+Connect the MCP server so Claude Code can discover all components, templates, and design tokens:
+
+```bash
+claude mcp add canvas-ui-sdk node node_modules/canvas-ui-sdk/mcp/dist/index.js
+```
+
+## 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 Components
-- Button, Input, Select, Checkbox, Switch
-- Dialog, Popover, Dropdown
-- Avatar, Badge, Card
-- And more...
+### UI Primitives
+Button, Input, Select, Checkbox, Switch, Dialog, Popover, Dropdown, Avatar, Tabs, Tooltip, and more.
 
 ### Blocks
-- DataTable, ChatBubble, ProfileCard
-- Marketing sections (Hero, Testimonials, CTA)
-- Pricing components
-- Graph and metric tiles
-
-### Layouts
-- DashboardShell
-- IconSidebarShell
-- DoubleSidebarShell
-- StandardPageShell
-- AccountSettingsShell
-- MultistepShell
-- MobileMenuShell
+Data tables, social feeds, charts, metric tiles, chat widgets, forms, calendars, and more.
+
+### Layout Shells
+DashboardShell, IconSidebarShell, DoubleSidebarShell, StandardPageShell, AccountSettingsShell, MultistepShell, MobileMenuShell.
 
 ## Development
 
 ```bash
-# Install dependencies
-npm install
-
-# Build the package
-npm run build
-
-# Watch mode for development
-npm run dev
+npm install    # Install dependencies
+npm run build  # Build dist + registry + CLI
+npm run dev    # Watch mode
 ```
 
 ## License