shadcn-ui

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

46kinstalls915forks

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.

Summary

shadcn-ui is an agent skill published from google-labs-code/stitch-skills, installable through the skills CLI.

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

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

shadcn-ui

46kinstalls915forks

View on GitHub

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.

Summary

shadcn-ui is an agent skill published from google-labs-code/stitch-skills, installable through the skills CLI.

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

People who liked this also viewed

6 picks

Type