shadcn-ui

Name: shadcn-ui
Author: google-labs-code

bygoogle-labs-code· 30 skills

Installs

46k

Stars

7.8k

Forks

950

How to install shadcn-ui?

google-labs-code/stitch-skills/shadcn-ui

$npx -y skills add google-labs-code/stitch-skills --skill shadcn-ui

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/shadcn-ui"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui Component Integration
2
3	You are a frontend engineer specialized in building applications with shadcn/ui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.
4
5	## Core Principles
6
7	shadcn/ui is not a component library—it's a collection of reusable components that you copy into your project. This gives you:
8	- Full ownership: Components live in your codebase, not node_modules
9	- Complete customization: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives
10	- No version lock-in: Update components selectively at your own pace
11	- Zero runtime overhead: No library bundle, just the code you need
12
13	## Component Discovery and Installation
14
15	### 1. Browse Available Components
16
17	Use the shadcn MCP tools to explore the component catalog and Registry Directory:
18	- List all components: Use `list_components` to see the complete catalog
19	- Get component metadata: Use `get_component_metadata` to understand props, dependencies, and usage
20	- View component demos: Use `get_component_demo` to see implementation examples
21
22	### 2. Component Installation
23
24	There are two approaches to adding components:
25
26	A. Direct Installation (Recommended)
27	```bash
28	npx shadcn@latest add [component-name]
29	```
30
31	This command:
32	- Downloads the component source code (adapting to your config: Radix vs Base UI)
33	- Installs required dependencies
34	- Places files in `components/ui/`
35	- Updates your `components.json` config
36
37	B. Manual Integration
38	1. Use `get_component` to retrieve the source code
39	2. Create the file in `components/ui/[component-name].tsx`
40	3. Install peer dependencies manually
41	4. Adjust imports if needed
42
43	### 3. Registry and Custom Registries
44
45	If working with a custom registry (defined in `components.json`) or exploring the Registry Directory:
46	- Use `get_project_registries` to list available registries
47	- Use `list_items_in_registries` to see registry-specific components
48	- Use `view_items_in_registries` for detailed component information
49	- Use `search_items_in_registries` to find specific components
50
51	## Project Setup
52
53	### Initial Configuration
54
55	For new projects, use the `create` command to customize everything (style, fonts, component library):
56
57	```bash
58	npx shadcn@latest create
59	```
60
61	For existing projects, initialize configuration:
62
63	```bash
64	npx shadcn@latest init
65	```
66
67	This creates `components.json` with your configuration:
68	- style: default, new-york (classic) OR choose new visual styles like Vega, Nova, Maia, Lyra, Mira
69	- baseColor: slate, gray, zinc, neutral, stone
70	- cssVariables: true/false for CSS variable usage
71	- tailwind config: paths to Tailwind files
72	- aliases: import path shortcuts
73	- rsc: Use React Server Components (yes/no)
74	- rtl: Enable RTL support (optional)
75
76	### Required Dependencies
77
78	shadcn/ui components require:
79	- React (18+)
80	- Tailwind CSS (3.0+)
81	- Primitives: Radix UI OR Base UI (depending on your choice)
82	- class-variance-authority (for variant styling)
83	- clsx and tailwind-merge (for class composition)
84
85	## Component Architecture
86
87	### File Structure
88	```
89	src/
90	├── components/
91	│ ├── ui/ # shadcn components
92	│ │ ├── button.tsx
93	│ │ ├── card.tsx
94	│ │ └── dialog.tsx
95	│ └── [custom]/ # your composed components
96	│ └── user-card.tsx
97	├── lib/
98	│ └── utils.ts # cn() utility
99	└── app/
100	└── page.tsx
101	```
102
103	### The `cn()` Utility
104
105	All shadcn components use the `cn()` helper for class merging:
106
107	```typescript
108	import { clsx, type ClassValue } from "clsx"
109	import { twMerge } from "tailwind-merge"
110
111	export function cn(...inputs: ClassValue[]) {
112	return twMerge(clsx(inputs))
113	}
114	```
115
116	This allows you to:
117	- Override default styles without conflicts
118	- Conditionally apply classes
119	- Merge Tailwind classes intelligently
120
121	## Customization Best Practices
122
123	### 1. Theme Customization
124
125	Edit your Tailwind config and CSS variables in `app/globals.css`:
126
127	```css
128	@layer base {
129	:root {
130	--background: 0 0% 100%;
131	--foreground: 222.2 84% 4.9%;
132	--primary: 221.2 83.2% 53.3%;
133	/* ... more variables */
134	}
135
136	.dark {
137	--background: 222.2 84% 4.9%;
138	--foreground: 210 40% 98%;
139	/* ... dark mode overrides */
140	}
141	}
142	```
143
144	### 2. Component Variants
145
146	Use `class-variance-authority` (cva) for variant logic:
147
148	```typescript
149	import { cva } from "class-variance-authority"
150
151	const buttonVariants = cva(
152	"inline-flex items-center justify-center rounded-md",
153	{
154	variants: {
155	variant: {
156	default: "bg-primary text-primary-foreground",
157	outline: "border border-input",
158	},
159	size: {
160	default: "h-10 px-4 py-2",
161	sm: "h-9 rounded-md px-3",
162	},
163	},
164	defaultVariants: {
165	variant: "default",
166	size: "default",
167	},
168	}
169	)
170	```
171
172	### 3. Extending Components
173
174	Create wrapper components in `components/` (not `components/ui/`):
175
176	```typescript
177	// components/custom-button.tsx
178	import { Button } from "@/components/ui/button"
179	import { Loader2 } from "lucide-react"
180
181	export function LoadingButton({
182	loading,
183	children,
184	...props
185	}: ButtonProps & { loading?: boolean }) {
186	return (
187	<Button disabled={loading} {...props}>
188	{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
189	{children}
190	</Button>
191	)
192	}
193	```
194
195	## Blocks and Complex Components
196
197	shadcn/ui provides complete UI blocks (authentication forms, dashboards, etc.):
198
199	1. List available blocks: Use `list_blocks` with optional category filter
200	2. Get block source: Use `get_block` with the block name
201	3. Install blocks: Many blocks include multiple component files
202
203	Blocks are organized by category:
204	- calendar: Calendar interfaces
205	- dashboard: Dashboard layouts
206	- login: Authentication flows
207	- sidebar: Navigation sidebars
208	- products: E-commerce components
209
210	## Accessibility
211
212	All shadcn/ui components are built on Radix UI primitives, ensuring:
213	- Keyboard navigation: Full keyboard support out of the box
214	- Screen reader support: Proper ARIA attributes
215	- Focus management: Logical focus flow
216	- Disabled states: Proper disabled and aria-disabled handling
217
218	When customizing, maintain accessibility:
219	- Keep ARIA attributes
220	- Preserve keyboard handlers
221	- Test with screen readers
222	- Maintain focus indicators
223
224	## Common Patterns
225
226	### Form Building
227	```typescript
228	import { Button } from "@/components/ui/button"
229	import { Input } from "@/components/ui/input"
230	import { Label } from "@/components/ui/label"
231
232	// Use with react-hook-form for validation
233	import { useForm } from "react-hook-form"
234	```
235
236	### Dialog/Modal Patterns
237	```typescript
238	import {
239	Dialog,
240	DialogContent,
241	DialogDescription,
242	DialogHeader,
243	DialogTitle,
244	DialogTrigger,
245	} from "@/components/ui/dialog"
246	```
247
248	### Data Display
249	```typescript
250	import {
251	Table,
252	TableBody,
253	TableCell,
254	TableHead,
255	TableHeader,
256	TableRow,
257	} from "@/components/ui/table"
258	```
259
260	## Troubleshooting
261
262	### Import Errors
263	- Check `components.json` for correct alias configuration
264	- Verify `tsconfig.json` includes the `@` path alias:
265	```json
266	{
267	"compilerOptions": {
268	"paths": {
269	"@/": ["./src/"]
270	}
271	}
272	}
273	```
274
275	### Style Conflicts
276	- Ensure Tailwind CSS is properly configured
277	- Check that `globals.css` is imported in your root layout
278	- Verify CSS variable names match between components and theme
279
280	### Missing Dependencies
281	- Run component installation via CLI to auto-install deps
282	- Manually check `package.json` for required Radix UI packages
283	- Use `get_component_metadata` to see dependency lists
284
285	### Version Compatibility
286	- shadcn/ui v4 requires React 18+ and Next.js 13+ (if using Next.js)
287	- Some components require specific Radix UI versions
288	- Check documentation for breaking changes between versions
289
290	## Validation and Quality
291
292	Before committing components:
293	1. Type check: Run `tsc --noEmit` to verify TypeScript
294	2. Lint: Run your linter to catch style issues
295	3. Test accessibility: Use tools like axe DevTools
296	4. Visual QA: Test in light and dark modes
297	5. Responsive check: Verify behavior at different breakpoints
298
299	## Resources
300
301	Refer to the following resource files for detailed guidance:
302	- `resources/setup-guide.md` - Step-by-step project initialization
303	- `resources/component-catalog.md` - Complete component reference
304	- `resources/customization-guide.md` - Theming and variant patterns
305	- `resources/migration-guide.md` - Upgrading from other UI libraries
306
307	## Examples
308
309	See the `examples/` directory for:
310	- Complete component implementations
311	- Form patterns with validation
312	- Dashboard layouts
313	- Authentication flows
314	- Data table implementations

6 picks

Type

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/shadcn-ui"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

shadcn-ui

How to install shadcn-ui?

Related

shadcn-ui

How to install shadcn-ui?

Related