shadcn-ui

1# shadcn/ui Components
2 
3Add 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.
4 
5**Prerequisite**: Theme infrastructure must exist (CSS variables, components.json, cn() utility). Use `tailwind-theme-builder` first if not set up.
6 
7## Installation Order
8 
9Install components in dependency order. Foundation components first, then feature components:
10 
11### Foundation (install first)
12 
13```bash
14pnpm dlx shadcn@latest add button
15pnpm dlx shadcn@latest add input label
16pnpm dlx shadcn@latest add card
17```
18 
19### Feature Components (install as needed)
20 
21```bash
22# Forms
23pnpm dlx shadcn@latest add form        # needs: react-hook-form, zod, @hookform/resolvers
24pnpm dlx shadcn@latest add textarea select checkbox switch
25 
26# Feedback
27pnpm dlx shadcn@latest add toast        # needs: sonner
28pnpm dlx shadcn@latest add alert badge
29 
30# Overlay
31pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu
32 
33# Data Display
34pnpm dlx shadcn@latest add table        # for data tables, also: @tanstack/react-table
35pnpm dlx shadcn@latest add tabs separator avatar
36 
37# Navigation
38pnpm dlx shadcn@latest add navigation-menu command
39```
40 
41### External Dependencies
42 
43| Component | Requires |
44|-----------|----------|
45| Form | `react-hook-form`, `zod`, `@hookform/resolvers` |
46| Toast | `sonner` |
47…