shadcn migration

You have shadcn/ui components in a React app. You want the same components in Django templates, plain HTML, or any stack Chiralkit targets — without rewriting them by hand. This is the flow.

Prerequisites

• The Chiralkit CLI installed globally (pnpm add -g chiralkit).
• A shadcn/ui component source file (a .tsx exporting the component).
• A tokens.map.json mapping Tailwind class names to your design tokens.

The map tells the extractor which Tailwind classes to treat as tokens vs. unmapped styling. A minimal shape:

{
  "colors": {
    "bg-primary": "color.primary",
    "text-primary-foreground": "color.primary-foreground",
    "bg-destructive": "color.destructive"
  },
  "spacing": { "px-4": "spacing.4", "h-10": "spacing.10" },
  "radius": { "rounded-md": "radius.md" }
}

1. Extract the spec

Point spec from-react at the component source and your tokens map. It walks the TypeScript type checker to derive props and scans cva variants and className strings for token usage.

Output (excerpt):

{
  "name": "shadcn-button",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": ["default", "destructive", "outline", "secondary", "ghost", "link"],
      "default": "default"
    },
    "size": {
      "type": "enum",
      "values": ["default", "sm", "lg", "icon"],
      "default": "default"
    },
    "asChild": { "type": "boolean", "default": false },
    "disabled": { "type": "boolean", "default": false },
    "href": { "type": "string" }
  },
  "tokens_used": {
    "colors": ["color.primary", "color.primary-foreground", "color.destructive", ...],
    "spacing": ["spacing.10", "spacing.4", "spacing.9", ...],
    "radius": ["radius.md"],
    "font": ["font.size-sm", "font.weight-medium"],
    "_unmapped": ["inline-flex", "items-center", "focus-visible:ring-2", ...]
  }
}

2. Review the spec

Two fields deserve a second read. props captures the React component's public API — anything you don't want exposed on the web-component version, remove here. tokens_used._unmapped lists every Tailwind class the map didn't recognize; each one is either a genuine style you should tokenize (add it to the map and rerun) or intentional literal styling that stays as-is.

3. Generate an implementation

Feed the spec to generate and tell it which stack to target. Chiralkit composes a prompt from the spec and either spawns your local agent (Claude Code, Cursor, Aider) or calls an LLM via the AI SDK, depending on registry/generator.config.json.

The generator produces per-stack source files under registry/shadcn-button/implementations/<stack>/. Review the output like any code — the spec is the contract, the implementation is one interpretation of it.

4. Use it in your project

Once the module lives in the registry, consuming it is the standard add flow — same as any Chiralkit module.

The files land in your project, tracked by git, editable as your own.