shadcn-uilisted

# 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) ```bash pnpm dlx shadcn@latest add button pnpm dlx shadcn@latest add input label pnpm dlx shadcn@latest add card ``` ### Feature Components (install as needed) ```bash # Forms pnpm dlx shadcn@latest add form # needs: react-hook-form, zod, @hookform/resolvers pnpm dlx shadcn@latest add textarea select checkbox switch # Feedback pnpm dlx shadcn@latest add toast # needs: sonner pnpm dlx shadcn@latest add alert badge # Overlay pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu # Data Display pnpm dlx shadcn@latest add table # for data tables, also: @tanstack/react-table pnpm dlx shadcn@latest add tabs separator avatar # Navigation pnpm dlx shadcn@latest add navigation-menu command ``` ### External Dependencies | Component | Requires | |-----------|----------| | Form | `react-hook-form`, `zod`, `@hookform/resolvers` | | Toast | `sonner` | | Data Table | `@tanstack/react-table