shadcn

Name: shadcn
Author: shadcn-ui

5.6kinstalls9.5kforks

How to install shadcn?

shadcn-ui/ui/shadcn

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

Installs into the current project.

Summary

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, o

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui
2
3	A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
4
5	> IMPORTANT: Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
6
7	## Current Project Context
8
9	```json
10	!`npx shadcn@latest info --json`
11	```
12
13	The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
14
15	## Principles
16
17	1. Use existing components first. Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
18	2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
19	3. Use built-in variants before custom styles. `variant="outline"`, `size="sm"`, etc.
20	4. Use semantic colors. `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
21
22	## Critical Rules
23
24	These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.
25
26	### Styling & Tailwind → [styling.md](./rules/styling.md)
27
28	- `className` for layout, not styling. Never override component colors or typography.
29	- *No `space-x-` or `space-y-`.* Use `flex` with `gap-`. For vertical stacks, `flex flex-col gap-`.
30	- *Use `size-` when width and height are equal.** `size-10` not `w-10 h-10`.
31	- Use `truncate` shorthand. Not `overflow-hidden text-ellipsis whitespace-nowrap`.
32	- No manual `dark:` color overrides. Use semantic tokens (`bg-background`, `text-muted-foreground`).
33	- Use `cn()` for conditional classes. Don't write manual template literal ternaries.
34	- No manual `z-index` on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.
35
36	### Forms & Inputs → [forms.md](./rules/forms.md)
37
38	- Forms use `FieldGroup` + `Field`. Never use raw `div` with `space-y-` or `grid gap-` for form layout.
39	- `InputGroup` uses `InputGroupInput`/`InputGroupTextarea`. Never raw `Input`/`Textarea` inside `InputGroup`.
40	- Buttons inside inputs use `InputGroup` + `InputGroupAddon`.
41	- Option sets (2–7 choices) use `ToggleGroup`. Don't loop `Button` with manual active state.
42	- `FieldSet` + `FieldLegend` for grouping related checkboxes/radios. Don't use a `div` with a heading.
43	- Field validation uses `data-invalid` + `aria-invalid`. `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
44
45	### Component Structure → [composition.md](./rules/composition.md)
46
47	- Items always inside their Group. `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
48	- Use `asChild` (radix) or `render` (base) for custom triggers. Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
49	- Dialog, Sheet, and Drawer always need a Title. `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
50	- Use full Card composition. `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
51	- Button has no `isPending`/`isLoading`. Compose with `Spinner` + `data-icon` + `disabled`.
52	- `TabsTrigger` must be inside `TabsList`. Never render triggers directly in `Tabs`.
53	- `Avatar` always needs `AvatarFallback`. For when the image fails to load.
54
55	### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
56
57	- Use existing components before custom markup. Check if a component exists before writing a styled `div`.
58	- Callouts use `Alert`. Don't build custom styled divs.
59	- Empty states use `Empty`. Don't build custom empty state markup.
60	- Toast via `sonner`. Use `toast()` from `sonner`.
61	- Use `Separator` instead of `<hr>` or `<div className="border-t">`.
62	- Use `Skeleton` for loading placeholders. No custom `animate-pulse` divs.
63	- Use `Badge` instead of custom styled spans.
64
65	### Icons → [icons.md](./rules/icons.md)
66
67	- Icons in `Button` use `data-icon`. `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
68	- **No sizing cl

People who liked this also viewed

6 picks

Type

shadcn

5.6kinstalls9.5kforks

View on GitHub

How to install shadcn?

shadcn-ui/ui/shadcn

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui
2
3	A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
4
5	> IMPORTANT: Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
6
7	## Current Project Context
8
9	```json
10	!`npx shadcn@latest info --json`
11	```
12
13	The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
14
15	## Principles
16
17	1. Use existing components first. Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
18	2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
19	3. Use built-in variants before custom styles. `variant="outline"`, `size="sm"`, etc.
20	4. Use semantic colors. `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
21
22	## Critical Rules
23
24	These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.
25
26	### Styling & Tailwind → [styling.md](./rules/styling.md)
27
28	- `className` for layout, not styling. Never override component colors or typography.
29	- *No `space-x-` or `space-y-`.* Use `flex` with `gap-`. For vertical stacks, `flex flex-col gap-`.
30	- *Use `size-` when width and height are equal.** `size-10` not `w-10 h-10`.
31	- Use `truncate` shorthand. Not `overflow-hidden text-ellipsis whitespace-nowrap`.
32	- No manual `dark:` color overrides. Use semantic tokens (`bg-background`, `text-muted-foreground`).
33	- Use `cn()` for conditional classes. Don't write manual template literal ternaries.
34	- No manual `z-index` on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.
35
36	### Forms & Inputs → [forms.md](./rules/forms.md)
37
38	- Forms use `FieldGroup` + `Field`. Never use raw `div` with `space-y-` or `grid gap-` for form layout.
39	- `InputGroup` uses `InputGroupInput`/`InputGroupTextarea`. Never raw `Input`/`Textarea` inside `InputGroup`.
40	- Buttons inside inputs use `InputGroup` + `InputGroupAddon`.
41	- Option sets (2–7 choices) use `ToggleGroup`. Don't loop `Button` with manual active state.
42	- `FieldSet` + `FieldLegend` for grouping related checkboxes/radios. Don't use a `div` with a heading.
43	- Field validation uses `data-invalid` + `aria-invalid`. `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
44
45	### Component Structure → [composition.md](./rules/composition.md)
46
47	- Items always inside their Group. `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
48	- Use `asChild` (radix) or `render` (base) for custom triggers. Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
49	- Dialog, Sheet, and Drawer always need a Title. `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
50	- Use full Card composition. `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
51	- Button has no `isPending`/`isLoading`. Compose with `Spinner` + `data-icon` + `disabled`.
52	- `TabsTrigger` must be inside `TabsList`. Never render triggers directly in `Tabs`.
53	- `Avatar` always needs `AvatarFallback`. For when the image fails to load.
54
55	### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
56
57	- Use existing components before custom markup. Check if a component exists before writing a styled `div`.
58	- Callouts use `Alert`. Don't build custom styled divs.
59	- Empty states use `Empty`. Don't build custom empty state markup.
60	- Toast via `sonner`. Use `toast()` from `sonner`.
61	- Use `Separator` instead of `<hr>` or `<div className="border-t">`.
62	- Use `Skeleton` for loading placeholders. No custom `animate-pulse` divs.
63	- Use `Badge` instead of custom styled spans.
64
65	### Icons → [icons.md](./rules/icons.md)
66
67	- Icons in `Button` use `data-icon`. `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
68	- **No sizing cl

People who liked this also viewed

6 picks

Type