Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-shadcn-ui
Component patterns for shadcn/ui with both Radix UI and Base UI primitives. Covers API differences, mapping between primitives, and correct usage patterns.
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-componentsThis 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 component work, use `TeamCreate` to spawn agents:
<!-- AUTO-GENERATED by export-plugins.py — DO NOT EDIT -->
Provides shadcn/ui component patterns using Radix primitives and Tailwind CSS, including CLI commands for init/add, CVA variants, compound components, and styling with data-slot attributes.
Configure shadcn/ui registries, components.json, and CLI commands. Covers default Radix registry, Base UI registry, and custom registries.
Share bugs, ideas, or general feedback.
Before component work, use TeamCreate to spawn agents:
After: Run fuse-ai-pilot:sniper for validation.
| Feature | Description |
|---|---|
| Radix primitives | Default shadcn/ui since 2021 |
| Base UI primitives | New option since late 2025 |
| Component mapping | 1:1 mapping between both |
| API differences | asChild vs render, naming |
components/ui/
├── dialog.tsx # Adapted to detected primitive
├── select.tsx
├── accordion.tsx
└── ...
-> See dialog-example.md for complete component
ALWAYS consult shadcn MCP before adding components:
mcp__shadcn__search_items_in_registries -> find component
mcp__shadcn__view_items_in_registries -> view source
mcp__shadcn__get_add_command_for_items -> get install command
| Component | Radix Part | Base UI Part |
|---|---|---|
| Dialog | DialogContent | Dialog.Popup |
| Dialog | DialogOverlay | Dialog.Backdrop |
| Select | SelectContent | Select.Positioner + Select.Popup |
| Tooltip | TooltipContent | Tooltip.Positioner + Tooltip.Popup |
| Accordion | AccordionContent | Accordion.Panel |
| Popover | PopoverContent | Popover.Positioner + Popover.Popup |
| Menu | DropdownMenuContent | Menu.Positioner + Menu.Popup |
asChild<Dialog.Trigger asChild>
<Button variant="outline">Open</Button>
</Dialog.Trigger>
render<Dialog.Trigger render={<Button variant="outline" />}>
Open
</Dialog.Trigger>
| Topic | Reference | When to Consult |
|---|---|---|
| Radix APIs | radix-components.md | Building with Radix primitives |
| Base UI APIs | baseui-components.md | Building with Base UI primitives |
| Template | When to Use |
|---|---|
| dialog-example.md | Creating Dialog components |