Help us improve
Share bugs, ideas, or general feedback.
From fuse-react
shadcn/ui for React with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.
npx claudepluginhub fusengine/agents --plugin fuse-reactHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-react:react-shadcnThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Beautiful, accessible components built on Radix UI with Tailwind CSS styling.
references/accordion.mdreferences/alert-dialog.mdreferences/alert.mdreferences/aspect-ratio.mdreferences/avatar.mdreferences/badge.mdreferences/breadcrumb.mdreferences/button.mdreferences/calendar.mdreferences/card.mdreferences/carousel.mdreferences/chart.mdreferences/checkbox.mdreferences/collapsible.mdreferences/command.mdreferences/configuration.mdreferences/context-menu.mdreferences/dialog.mdreferences/drawer.mdreferences/dropdown.mdInstalls, configures, and implements shadcn/ui React components with Tailwind CSS, React Hook Form, Zod for accessible UIs like buttons, forms, dialogs, tables.
Installs and configures shadcn/ui components with Radix UI, Tailwind CSS, and React Hook Form + Zod validation. Use when initializing shadcn/ui, adding components, or building accessible forms and UI patterns.
Installs shadcn/ui components in themed React apps. Guides order, dependencies (react-hook-form, tanstack table), customizations, gotchas, and recipes for forms, data tables, navigation.
Share bugs, ideas, or general feedback.
Beautiful, accessible components built on Radix UI with Tailwind CSS styling.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Feature | Benefit |
|---|---|
| Copy/paste model | Components copied to your project, full ownership |
| Radix UI foundation | Accessibility built-in, unstyled primitives |
| Tailwind CSS styling | Utility-first, easy customization |
| TanStack Form ready | Modern form library with Field pattern |
| Lucide icons | Consistent, customizable icon set |
bunx --bun shadcn@latest add@/modules/cores/shadcn/components/ui/cn() utilityComponents installed to @/modules/cores/shadcn/components/ui/ following SOLID architecture. Utils at @/modules/cores/lib/utils.ts with cn() helper function.
Create .mcp.json at project root for Claude Code integration with shadcn registry.
mcp__shadcn__search_items_in_registries - Search available componentsmcp__shadcn__view_items_in_registries - View component source codemcp__shadcn__get_item_examples_from_registries - Get usage examplesmcp__shadcn__get_add_command_for_items - Get installation commandsSee installation.md for complete MCP setup.
| Category | Components | Primary Reference |
|---|---|---|
| Setup | Init, configuration, theming, icons | installation.md |
| Forms | Button, Input, Field, Select, Checkbox, Switch, Slider | field-patterns.md |
| Overlay | Dialog, Sheet, Drawer, Popover, Tooltip, HoverCard | dialog.md |
| Feedback | Alert, Toast (Sonner), Progress, Skeleton, Spinner | toast.md |
| Data Display | Table, Badge, Avatar, Calendar, Chart, Carousel | table.md |
| Navigation | Breadcrumb, DropdownMenu, Command, Sidebar, Tabs | sidebar.md |
| Layout | Card, Accordion, Separator, ScrollArea, Resizable | card.md |
mcp__shadcn__* to explore before implementingindex.css :root| Need | Reference |
|---|---|
| Initial setup | installation.md, configuration.md |
| Form patterns | field-patterns.md, form-examples.md |
| Theme customization | theming.md |
| Data tables | table.md |
| Modal dialogs | dialog.md, alert-dialog.md |
| Navigation | sidebar.md, navigation-menu.md |