Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-shadcn-ui
Migration guide between Radix UI and Base UI primitives for shadcn/ui. Covers step-by-step migration, API transformations, and validation checklists.
npx claudepluginhub fusengine/agents --plugin fuse-shadcn-uiHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-shadcn-ui:shadcn-migrationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before migration, use `TeamCreate` to spawn agents:
Component patterns for shadcn/ui with both Radix UI and Base UI primitives. Covers API differences, mapping between primitives, and correct usage patterns.
Guides editing shadcn/ui code: components.json, cn() utility, Radix primitives, add workflows, dialogs, forms, data tables, command palettes, Tailwind composition. Enforces asChild SPA routing, semantic colors, atomic components.
Manages shadcn/ui components and projects with CLI commands, documentation, styling rules, form patterns, and composition guidance for React/Tailwind UIs.
Share bugs, ideas, or general feedback.
Before migration, use TeamCreate to spawn agents:
After: Run fuse-ai-pilot:sniper for validation.
| Feature | Description |
|---|---|
| Radix -> Base UI | Migrate from legacy to new primitives |
| Base UI -> Radix | Migrate to established primitives |
| API mapping | Complete transformation table |
| Validation | Post-migration checklist |
Migration order (leaf components first):
1. Tooltip, Switch, Checkbox (simple)
2. Accordion, Tabs (medium)
3. Dialog, Select, Popover, Menu (complex)
-> See migration-dialog.md for complete example
[ ] Run shadcn-detection to confirm current primitive
[ ] Create backup branch (git checkout -b pre-migration)
[ ] Inventory all affected files (Grep for imports)
[ ] Review component-specific API changes
[ ] Plan migration order (leaf components first)
1. DETECT -> Run shadcn-detection skill
2. BACKUP -> Create git branch
3. INVENTORY -> List all affected components
4. TRANSFORM -> Apply API changes per component
5. VALIDATE -> Run tests + sniper check
| Aspect | Radix | Base UI |
|---|---|---|
| Composition | asChild | render prop |
| Dialog content | DialogContent | Dialog.Popup |
| Dialog overlay | DialogOverlay | Dialog.Backdrop |
| Positioning | Built-in | Separate Positioner |
| Accordion body | AccordionContent | Accordion.Panel |
| Data attrs | data-state="open" | data-[open] |
| Package | Multiple @radix-ui/* | Single @base-ui/react |
| Topic | Reference | When to Consult |
|---|---|---|
| Radix -> Base UI | radix-to-baseui.md | Migrating from Radix |
| Base UI -> Radix | baseui-to-radix.md | Migrating to Radix |
| Template | When to Use |
|---|---|
| migration-dialog.md | Complete migration example |