shadcn-ui

Name: shadcn-ui
Author: jezweb

937stars96forks

How to install shadcn-ui?

jezweb/claude-skills/shadcn-ui

$npx -y skills add jezweb/claude-skills --skill shadcn-ui

Installs into the current project.

Summary

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 th

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui Components
2
3	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.
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
9	Install components in dependency order. Foundation components first, then feature components:
10
11	### Foundation (install first)
12
13	```bash
14	pnpm dlx shadcn@latest add button
15	pnpm dlx shadcn@latest add input label
16	pnpm dlx shadcn@latest add card
17	```
18
19	### Feature Components (install as needed)
20
21	```bash
22	# Forms
23	pnpm dlx shadcn@latest add form # needs: react-hook-form, zod, @hookform/resolvers
24	pnpm dlx shadcn@latest add textarea select checkbox switch
25
26	# Feedback
27	pnpm dlx shadcn@latest add toast # needs: sonner
28	pnpm dlx shadcn@latest add alert badge
29
30	# Overlay
31	pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu
32
33	# Data Display
34	pnpm dlx shadcn@latest add table # for data tables, also: @tanstack/react-table
35	pnpm dlx shadcn@latest add tabs separator avatar
36
37	# Navigation
38	pnpm 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	\| Data Table \| `@tanstack/react-table` \|
48	\| Command \| `cmdk` \|
49	\| Date Picker \| `date-fns` (optional) \|
50
51	Install external deps separately: `pnpm add react-hook-form zod @hookform/resolvers`
52
53	## Known Gotchas
54
55	These are documented corrections that prevent common bugs:
56
57	### Radix Select — No Empty Strings
58
59	```tsx
60	// Don't use empty string values
61	<SelectItem value="">All</SelectItem> // BREAKS
62
63	// Use sentinel value
64	<SelectItem value="__any__">All</SelectItem> // WORKS
65	const actual = value === "__any__" ? "" : value
66	```
67
68	### React Hook Form — Null Values
69
70	```tsx
71	// Don't spread {...field} — it passes null which Input rejects
72	<Input
73	value={field.value ?? ''}
74	onChange={field.onChange}
75	onBlur={field.onBlur}
76	name={field.name}
77	ref={field.ref}
78	/>
79	```
80
81	### Lucide Icons — Tree-Shaking
82
83	```tsx
84	// Don't use dynamic import — icons get tree-shaken in production
85	import * as LucideIcons from 'lucide-react'
86	const Icon = LucideIcons[iconName] // BREAKS in prod
87
88	// Use explicit map
89	import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
90	const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
91	const Icon = ICON_MAP[iconName]
92	```
93
94	### Dialog Width Override
95
96	```tsx
97	// Default sm:max-w-lg won't be overridden by max-w-6xl
98	<DialogContent className="max-w-6xl"> // DOESN'T WORK
99
100	// Use same breakpoint prefix
101	<DialogContent className="sm:max-w-6xl"> // WORKS
102	```
103
104	## Customising Components
105
106	shadcn components use semantic CSS tokens from your theme. To customise:
107
108	### Variant extension
109
110	Add custom variants by editing the component file in `src/components/ui/`:
111
112	```tsx
113	// button.tsx — add a "brand" variant
114	const buttonVariants = cva("...", {
115	variants: {
116	variant: {
117	default: "bg-primary text-primary-foreground",
118	brand: "bg-brand text-brand-foreground hover:bg-brand/90",
119	// ... existing variants
120	},
121	},
122	})
123	```
124
125	### Colour overrides
126
127	Use semantic tokens from your theme — never raw Tailwind colours:
128
129	```tsx
130	// Don't use raw colours
131	<Button className="bg-blue-500"> // WRONG
132
133	// Use semantic tokens
134	<Button className="bg-primary"> // RIGHT
135	<Card className="bg-card text-card-foreground"> // RIGHT
136	```
137
138	## Workflow
139
140	### Step 1: Assess Needs
141
142	Determine what UI patterns the project needs:
143
144	\| Need \| Components \|
145	\|------\|-----------\|
146	\| Forms with validation \| Form, Input, Label, Select, Textarea, Button, Toast \|
147	\| Data display with sorting \| Table, Badge, Pagination \|
148	\| Admin CRUD interface \| Dialog, Form, Table, Button, Toast \|
149	\| Marketing/landing page \| Card, Button, Badge, Separator \|
150	\| Settings/preferences \| Tabs, Form, Switch, Select, Toast \|
151	\| Navigation \| NavigationMenu (desktop), Sheet (mobile), ModeToggle \|
152
153	### Step 2: Install Components
154
155	Install foundation first, then feature components for the identified needs. Use the commands above.
156
157	### Step 3: Build Recipes
158
159	Combine components into working patterns. See [references/recipes.md](references/recipes.md) for complete working examples:
160
161	- Contact Form — Form + Input + Textarea + Button + T

People who liked this also viewed

6 picks

Type

shadcn-ui

937stars96forks

View on GitHub

How to install shadcn-ui?

jezweb/claude-skills/shadcn-ui

$npx -y skills add jezweb/claude-skills --skill shadcn-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui Components
2
3	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.
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
9	Install components in dependency order. Foundation components first, then feature components:
10
11	### Foundation (install first)
12
13	```bash
14	pnpm dlx shadcn@latest add button
15	pnpm dlx shadcn@latest add input label
16	pnpm dlx shadcn@latest add card
17	```
18
19	### Feature Components (install as needed)
20
21	```bash
22	# Forms
23	pnpm dlx shadcn@latest add form # needs: react-hook-form, zod, @hookform/resolvers
24	pnpm dlx shadcn@latest add textarea select checkbox switch
25
26	# Feedback
27	pnpm dlx shadcn@latest add toast # needs: sonner
28	pnpm dlx shadcn@latest add alert badge
29
30	# Overlay
31	pnpm dlx shadcn@latest add dialog sheet popover dropdown-menu
32
33	# Data Display
34	pnpm dlx shadcn@latest add table # for data tables, also: @tanstack/react-table
35	pnpm dlx shadcn@latest add tabs separator avatar
36
37	# Navigation
38	pnpm 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	\| Data Table \| `@tanstack/react-table` \|
48	\| Command \| `cmdk` \|
49	\| Date Picker \| `date-fns` (optional) \|
50
51	Install external deps separately: `pnpm add react-hook-form zod @hookform/resolvers`
52
53	## Known Gotchas
54
55	These are documented corrections that prevent common bugs:
56
57	### Radix Select — No Empty Strings
58
59	```tsx
60	// Don't use empty string values
61	<SelectItem value="">All</SelectItem> // BREAKS
62
63	// Use sentinel value
64	<SelectItem value="__any__">All</SelectItem> // WORKS
65	const actual = value === "__any__" ? "" : value
66	```
67
68	### React Hook Form — Null Values
69
70	```tsx
71	// Don't spread {...field} — it passes null which Input rejects
72	<Input
73	value={field.value ?? ''}
74	onChange={field.onChange}
75	onBlur={field.onBlur}
76	name={field.name}
77	ref={field.ref}
78	/>
79	```
80
81	### Lucide Icons — Tree-Shaking
82
83	```tsx
84	// Don't use dynamic import — icons get tree-shaken in production
85	import * as LucideIcons from 'lucide-react'
86	const Icon = LucideIcons[iconName] // BREAKS in prod
87
88	// Use explicit map
89	import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
90	const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
91	const Icon = ICON_MAP[iconName]
92	```
93
94	### Dialog Width Override
95
96	```tsx
97	// Default sm:max-w-lg won't be overridden by max-w-6xl
98	<DialogContent className="max-w-6xl"> // DOESN'T WORK
99
100	// Use same breakpoint prefix
101	<DialogContent className="sm:max-w-6xl"> // WORKS
102	```
103
104	## Customising Components
105
106	shadcn components use semantic CSS tokens from your theme. To customise:
107
108	### Variant extension
109
110	Add custom variants by editing the component file in `src/components/ui/`:
111
112	```tsx
113	// button.tsx — add a "brand" variant
114	const buttonVariants = cva("...", {
115	variants: {
116	variant: {
117	default: "bg-primary text-primary-foreground",
118	brand: "bg-brand text-brand-foreground hover:bg-brand/90",
119	// ... existing variants
120	},
121	},
122	})
123	```
124
125	### Colour overrides
126
127	Use semantic tokens from your theme — never raw Tailwind colours:
128
129	```tsx
130	// Don't use raw colours
131	<Button className="bg-blue-500"> // WRONG
132
133	// Use semantic tokens
134	<Button className="bg-primary"> // RIGHT
135	<Card className="bg-card text-card-foreground"> // RIGHT
136	```
137
138	## Workflow
139
140	### Step 1: Assess Needs
141
142	Determine what UI patterns the project needs:
143
144	\| Need \| Components \|
145	\|------\|-----------\|
146	\| Forms with validation \| Form, Input, Label, Select, Textarea, Button, Toast \|
147	\| Data display with sorting \| Table, Badge, Pagination \|
148	\| Admin CRUD interface \| Dialog, Form, Table, Button, Toast \|
149	\| Marketing/landing page \| Card, Button, Badge, Separator \|
150	\| Settings/preferences \| Tabs, Form, Switch, Select, Toast \|
151	\| Navigation \| NavigationMenu (desktop), Sheet (mobile), ModeToggle \|
152
153	### Step 2: Install Components
154
155	Install foundation first, then feature components for the identified needs. Use the commands above.
156
157	### Step 3: Build Recipes
158
159	Combine components into working patterns. See [references/recipes.md](references/recipes.md) for complete working examples:
160
161	- Contact Form — Form + Input + Textarea + Button + T

People who liked this also viewed

6 picks

Type