Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructu

shadcn/ui Components Add shadcn/ui components to a themed React project. This skill runs AFTER tailwind theme builder has set up CSS variables, ThemeProvider, and dark mode. It handles component installation, customisation, and combining components into working patterns. Prerequisite : Theme infrastructure must exist (CSS variables, components.json, cn() utility). Use tailwind theme builder first if not set up. Installation Order Install components in dependency order. Foundation components first, then feature components: Foundation (install first) Feature Components (install as needed) External Dependencies Component Requires Form react hook form , zod , @hookform/resolvers Toast sonner Data Table @tanstack/react table Command cmdk Date Picker date fns (optional) Install external deps separately: pnpm add react hook form zod @hookform/resolvers Known Gotchas These are documented corrections that prevent common bugs: Radix Select — No Empty Strings React Hook Form — Null Values Lucide Icons — Tree Shaking Dialog Width Override Customising Components shadcn components use semantic CSS tokens from your theme. To customise: Variant extension Add custom variants by editing the component file in src/components/ui/ : Colour overrides Use semantic tokens from your theme — never raw Tailwind colours: Workflow Step 1: Assess Needs Determine what UI patterns the project needs: Need Components Forms with validation Form, Input, Label, Select, Textarea, Button, Toast Data display with sorting Table, Badge, Pagination Admin CRUD interface Dialog, Form, Table, Button, Toast Marketing/landing page Card, Button, Badge, Separator Settings/preferences Tabs, Form, Switch, Select, Toast Navigation NavigationMenu (desktop), Sheet (mobile), ModeToggle Step 2: Install Components Install foundation first, then feature components for the identified needs. Use the commands above. Step 3: Build Recipes Combine components into working patterns. See [references/recipes.md](references/recipes.md) for complete working examples: Contact Form — Form + Input + Textarea + Button + Toast Data Table — Table + Column sorting + Pagination + Search Modal CRUD — Dialog + Form + Button Navigation — Sheet + NavigationMenu + ModeToggle Settings Page — Tabs + Form + Switch + Select + Toast Step 4: Customise Apply project specific colours and variants using semantic tokens from the theme. Reference Files When Read Choosing components, install commands, props [references/component catalogue.md](references/component catalogue.md) Building complete UI patterns [references/recipes.md](references/recipes.md)

shadcn-ui