create-deesse-app 0.2.3 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/copy.d.ts +1 -1
- package/dist/src/copy.d.ts.map +1 -1
- package/dist/src/copy.js +50 -71
- package/dist/src/copy.js.map +1 -1
- package/dist/src/index.js +3 -2
- package/dist/src/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -5
- package/templates/default/.agents/skills/shadcn/SKILL.md +242 -0
- package/templates/default/.agents/skills/shadcn/agents/openai.yml +5 -0
- package/templates/default/.agents/skills/shadcn/assets/shadcn-small.png +0 -0
- package/templates/default/.agents/skills/shadcn/assets/shadcn.png +0 -0
- package/templates/default/.agents/skills/shadcn/cli.md +257 -0
- package/templates/default/.agents/skills/shadcn/customization.md +202 -0
- package/templates/default/.agents/skills/shadcn/evals/evals.json +47 -0
- package/templates/default/.agents/skills/shadcn/mcp.md +94 -0
- package/templates/default/.agents/skills/shadcn/rules/base-vs-radix.md +306 -0
- package/templates/default/.agents/skills/shadcn/rules/composition.md +195 -0
- package/templates/default/.agents/skills/shadcn/rules/forms.md +192 -0
- package/templates/default/.agents/skills/shadcn/rules/icons.md +101 -0
- package/templates/default/.agents/skills/shadcn/rules/styling.md +162 -0
- package/templates/default/AGENTS.md +5 -0
- package/templates/default/CLAUDE.md +1 -0
- package/templates/default/README.md +28 -0
- package/templates/default/components.json +25 -0
- package/templates/default/eslint.config.mjs +18 -0
- package/templates/default/next.config.ts +7 -0
- package/templates/default/package.json +50 -0
- package/templates/default/postcss.config.mjs +7 -0
- package/templates/default/public/file.svg +1 -0
- package/templates/default/public/globe.svg +1 -0
- package/templates/default/public/nesalia.svg +50 -0
- package/templates/default/public/window.svg +1 -0
- package/templates/default/skills-lock.json +10 -0
- package/templates/default/src/app/(deesse)/admin/[[...slug]]/page.tsx +20 -0
- package/templates/default/src/app/(deesse)/admin/layout.tsx +7 -0
- package/templates/default/src/app/(frontend)/page.tsx +50 -0
- package/templates/default/src/app/globals.css +130 -0
- package/templates/default/src/app/icon.svg +109 -0
- package/templates/default/src/app/layout.tsx +33 -0
- package/templates/default/src/app/page.tsx +50 -0
- package/templates/default/src/components/providers/index.tsx +9 -0
- package/templates/default/src/components/providers/theme-provider.tsx +11 -0
- package/templates/default/src/components/ui/accordion.tsx +81 -0
- package/templates/default/src/components/ui/alert-dialog.tsx +199 -0
- package/templates/default/src/components/ui/alert.tsx +76 -0
- package/templates/default/src/components/ui/aspect-ratio.tsx +11 -0
- package/templates/default/src/components/ui/avatar.tsx +112 -0
- package/templates/default/src/components/ui/badge.tsx +49 -0
- package/templates/default/src/components/ui/breadcrumb.tsx +122 -0
- package/templates/default/src/components/ui/button-group.tsx +83 -0
- package/templates/default/src/components/ui/button.tsx +67 -0
- package/templates/default/src/components/ui/calendar.tsx +222 -0
- package/templates/default/src/components/ui/card.tsx +103 -0
- package/templates/default/src/components/ui/carousel.tsx +242 -0
- package/templates/default/src/components/ui/chart.tsx +373 -0
- package/templates/default/src/components/ui/checkbox.tsx +33 -0
- package/templates/default/src/components/ui/collapsible.tsx +33 -0
- package/templates/default/src/components/ui/combobox.tsx +299 -0
- package/templates/default/src/components/ui/command.tsx +195 -0
- package/templates/default/src/components/ui/context-menu.tsx +263 -0
- package/templates/default/src/components/ui/dialog.tsx +168 -0
- package/templates/default/src/components/ui/direction.tsx +22 -0
- package/templates/default/src/components/ui/drawer.tsx +134 -0
- package/templates/default/src/components/ui/dropdown-menu.tsx +269 -0
- package/templates/default/src/components/ui/empty.tsx +104 -0
- package/templates/default/src/components/ui/field.tsx +238 -0
- package/templates/default/src/components/ui/hover-card.tsx +44 -0
- package/templates/default/src/components/ui/input-group.tsx +156 -0
- package/templates/default/src/components/ui/input-otp.tsx +87 -0
- package/templates/default/src/components/ui/input.tsx +19 -0
- package/templates/default/src/components/ui/item.tsx +196 -0
- package/templates/default/src/components/ui/kbd.tsx +26 -0
- package/templates/default/src/components/ui/label.tsx +24 -0
- package/templates/default/src/components/ui/menubar.tsx +280 -0
- package/templates/default/src/components/ui/native-select.tsx +52 -0
- package/templates/default/src/components/ui/navigation-menu.tsx +164 -0
- package/templates/default/src/components/ui/pagination.tsx +129 -0
- package/templates/default/src/components/ui/popover.tsx +89 -0
- package/templates/default/src/components/ui/progress.tsx +31 -0
- package/templates/default/src/components/ui/radio-group.tsx +44 -0
- package/templates/default/src/components/ui/resizable.tsx +50 -0
- package/templates/default/src/components/ui/scroll-area.tsx +55 -0
- package/templates/default/src/components/ui/select.tsx +192 -0
- package/templates/default/src/components/ui/separator.tsx +28 -0
- package/templates/default/src/components/ui/sheet.tsx +147 -0
- package/templates/default/src/components/ui/sidebar.tsx +702 -0
- package/templates/default/src/components/ui/skeleton.tsx +13 -0
- package/templates/default/src/components/ui/slider.tsx +59 -0
- package/templates/default/src/components/ui/sonner.tsx +49 -0
- package/templates/default/src/components/ui/spinner.tsx +10 -0
- package/templates/default/src/components/ui/switch.tsx +33 -0
- package/templates/default/src/components/ui/table.tsx +116 -0
- package/templates/default/src/components/ui/tabs.tsx +90 -0
- package/templates/default/src/components/ui/textarea.tsx +18 -0
- package/templates/default/src/components/ui/toggle-group.tsx +89 -0
- package/templates/default/src/components/ui/toggle.tsx +46 -0
- package/templates/default/src/components/ui/tooltip.tsx +57 -0
- package/templates/default/src/deesse.config.ts +11 -0
- package/templates/default/src/hooks/use-mobile.ts +19 -0
- package/templates/default/src/lib/utils.ts +6 -0
- package/templates/default/tsconfig.json +35 -0
- package/templates/minimal/.gitkeep +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-deesse-app",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Create a new DeesseJS project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
},
|
|
9
9
|
"files": [
|
|
10
10
|
"bin",
|
|
11
|
-
"dist"
|
|
11
|
+
"dist",
|
|
12
|
+
"templates"
|
|
12
13
|
],
|
|
13
14
|
"keywords": [
|
|
14
15
|
"create-app",
|
|
@@ -19,9 +20,7 @@
|
|
|
19
20
|
"author": "DeesseJS",
|
|
20
21
|
"license": "MIT",
|
|
21
22
|
"dependencies": {
|
|
22
|
-
"@clack/prompts": "^0.8.2"
|
|
23
|
-
"copy-template-dir": "^1.4.0",
|
|
24
|
-
"extract-zip": "^2.0.1"
|
|
23
|
+
"@clack/prompts": "^0.8.2"
|
|
25
24
|
},
|
|
26
25
|
"devDependencies": {
|
|
27
26
|
"@types/node": "^22.10.6",
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: shadcn
|
|
3
|
+
description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
|
|
4
|
+
user-invocable: false
|
|
5
|
+
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# shadcn/ui
|
|
9
|
+
|
|
10
|
+
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
|
|
11
|
+
|
|
12
|
+
> **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.
|
|
13
|
+
|
|
14
|
+
## Current Project Context
|
|
15
|
+
|
|
16
|
+
```json
|
|
17
|
+
!`npx shadcn@latest info --json`
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
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.
|
|
21
|
+
|
|
22
|
+
## Principles
|
|
23
|
+
|
|
24
|
+
1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
|
|
25
|
+
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
|
|
26
|
+
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
|
|
27
|
+
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
|
|
28
|
+
|
|
29
|
+
## Critical Rules
|
|
30
|
+
|
|
31
|
+
These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
|
|
32
|
+
|
|
33
|
+
### Styling & Tailwind → [styling.md](./rules/styling.md)
|
|
34
|
+
|
|
35
|
+
- **`className` for layout, not styling.** Never override component colors or typography.
|
|
36
|
+
- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
|
|
37
|
+
- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
|
|
38
|
+
- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
|
|
39
|
+
- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
|
|
40
|
+
- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
|
|
41
|
+
- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
|
|
42
|
+
|
|
43
|
+
### Forms & Inputs → [forms.md](./rules/forms.md)
|
|
44
|
+
|
|
45
|
+
- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
|
|
46
|
+
- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
|
|
47
|
+
- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
|
|
48
|
+
- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
|
|
49
|
+
- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
|
|
50
|
+
- **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.
|
|
51
|
+
|
|
52
|
+
### Component Structure → [composition.md](./rules/composition.md)
|
|
53
|
+
|
|
54
|
+
- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
|
|
55
|
+
- **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)
|
|
56
|
+
- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
|
|
57
|
+
- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
|
|
58
|
+
- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
|
|
59
|
+
- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
|
|
60
|
+
- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
|
|
61
|
+
|
|
62
|
+
### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
|
|
63
|
+
|
|
64
|
+
- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
|
|
65
|
+
- **Callouts use `Alert`.** Don't build custom styled divs.
|
|
66
|
+
- **Empty states use `Empty`.** Don't build custom empty state markup.
|
|
67
|
+
- **Toast via `sonner`.** Use `toast()` from `sonner`.
|
|
68
|
+
- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
|
|
69
|
+
- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
|
|
70
|
+
- **Use `Badge`** instead of custom styled spans.
|
|
71
|
+
|
|
72
|
+
### Icons → [icons.md](./rules/icons.md)
|
|
73
|
+
|
|
74
|
+
- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
|
|
75
|
+
- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
|
|
76
|
+
- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
|
|
77
|
+
|
|
78
|
+
### CLI
|
|
79
|
+
|
|
80
|
+
- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset <code>`.
|
|
81
|
+
|
|
82
|
+
## Key Patterns
|
|
83
|
+
|
|
84
|
+
These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
// Form layout: FieldGroup + Field, not div + Label.
|
|
88
|
+
<FieldGroup>
|
|
89
|
+
<Field>
|
|
90
|
+
<FieldLabel htmlFor="email">Email</FieldLabel>
|
|
91
|
+
<Input id="email" />
|
|
92
|
+
</Field>
|
|
93
|
+
</FieldGroup>
|
|
94
|
+
|
|
95
|
+
// Validation: data-invalid on Field, aria-invalid on the control.
|
|
96
|
+
<Field data-invalid>
|
|
97
|
+
<FieldLabel>Email</FieldLabel>
|
|
98
|
+
<Input aria-invalid />
|
|
99
|
+
<FieldDescription>Invalid email.</FieldDescription>
|
|
100
|
+
</Field>
|
|
101
|
+
|
|
102
|
+
// Icons in buttons: data-icon, no sizing classes.
|
|
103
|
+
<Button>
|
|
104
|
+
<SearchIcon data-icon="inline-start" />
|
|
105
|
+
Search
|
|
106
|
+
</Button>
|
|
107
|
+
|
|
108
|
+
// Spacing: gap-*, not space-y-*.
|
|
109
|
+
<div className="flex flex-col gap-4"> // correct
|
|
110
|
+
<div className="space-y-4"> // wrong
|
|
111
|
+
|
|
112
|
+
// Equal dimensions: size-*, not w-* h-*.
|
|
113
|
+
<Avatar className="size-10"> // correct
|
|
114
|
+
<Avatar className="w-10 h-10"> // wrong
|
|
115
|
+
|
|
116
|
+
// Status colors: Badge variants or semantic tokens, not raw colors.
|
|
117
|
+
<Badge variant="secondary">+20.1%</Badge> // correct
|
|
118
|
+
<span className="text-emerald-600">+20.1%</span> // wrong
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Component Selection
|
|
122
|
+
|
|
123
|
+
| Need | Use |
|
|
124
|
+
| -------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
125
|
+
| Button/action | `Button` with appropriate variant |
|
|
126
|
+
| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
|
|
127
|
+
| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` |
|
|
128
|
+
| Data display | `Table`, `Card`, `Badge`, `Avatar` |
|
|
129
|
+
| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` |
|
|
130
|
+
| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) |
|
|
131
|
+
| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` |
|
|
132
|
+
| Command palette | `Command` inside `Dialog` |
|
|
133
|
+
| Charts | `Chart` (wraps Recharts) |
|
|
134
|
+
| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` |
|
|
135
|
+
| Empty states | `Empty` |
|
|
136
|
+
| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` |
|
|
137
|
+
| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` |
|
|
138
|
+
|
|
139
|
+
## Key Fields
|
|
140
|
+
|
|
141
|
+
The injected project context contains these key fields:
|
|
142
|
+
|
|
143
|
+
- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
|
|
144
|
+
- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
|
|
145
|
+
- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
|
|
146
|
+
- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
|
|
147
|
+
- **`style`** → component visual treatment (e.g. `nova`, `vega`).
|
|
148
|
+
- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
|
|
149
|
+
- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
|
|
150
|
+
- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
|
|
151
|
+
- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
|
|
152
|
+
- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
|
|
153
|
+
|
|
154
|
+
See [cli.md — `info` command](./cli.md) for the full field reference.
|
|
155
|
+
|
|
156
|
+
## Component Docs, Examples, and Usage
|
|
157
|
+
|
|
158
|
+
Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
npx shadcn@latest docs button dialog select
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
|
|
165
|
+
|
|
166
|
+
## Workflow
|
|
167
|
+
|
|
168
|
+
1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
|
|
169
|
+
2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
|
|
170
|
+
3. **Find components** — `npx shadcn@latest search`.
|
|
171
|
+
4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
|
|
172
|
+
5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
|
|
173
|
+
6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
|
|
174
|
+
7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
|
|
175
|
+
8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
|
|
176
|
+
9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**?
|
|
177
|
+
- **Reinstall**: `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all components.
|
|
178
|
+
- **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
|
|
179
|
+
- **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
|
|
180
|
+
- **Important**: Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
|
|
181
|
+
|
|
182
|
+
## Updating Components
|
|
183
|
+
|
|
184
|
+
When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
|
|
185
|
+
|
|
186
|
+
1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
|
|
187
|
+
2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
|
|
188
|
+
3. Decide per file based on the diff:
|
|
189
|
+
- No local changes → safe to overwrite.
|
|
190
|
+
- Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
|
|
191
|
+
- User says "just update everything" → use `--overwrite`, but confirm first.
|
|
192
|
+
4. **Never use `--overwrite` without the user's explicit approval.**
|
|
193
|
+
|
|
194
|
+
## Quick Reference
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
# Create a new project.
|
|
198
|
+
npx shadcn@latest init --name my-app --preset base-nova
|
|
199
|
+
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
|
|
200
|
+
|
|
201
|
+
# Create a monorepo project.
|
|
202
|
+
npx shadcn@latest init --name my-app --preset base-nova --monorepo
|
|
203
|
+
npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
|
|
204
|
+
|
|
205
|
+
# Initialize existing project.
|
|
206
|
+
npx shadcn@latest init --preset base-nova
|
|
207
|
+
npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova
|
|
208
|
+
|
|
209
|
+
# Add components.
|
|
210
|
+
npx shadcn@latest add button card dialog
|
|
211
|
+
npx shadcn@latest add @magicui/shimmer-button
|
|
212
|
+
npx shadcn@latest add --all
|
|
213
|
+
|
|
214
|
+
# Preview changes before adding/updating.
|
|
215
|
+
npx shadcn@latest add button --dry-run
|
|
216
|
+
npx shadcn@latest add button --diff button.tsx
|
|
217
|
+
npx shadcn@latest add @acme/form --view button.tsx
|
|
218
|
+
|
|
219
|
+
# Search registries.
|
|
220
|
+
npx shadcn@latest search @shadcn -q "sidebar"
|
|
221
|
+
npx shadcn@latest search @tailark -q "stats"
|
|
222
|
+
|
|
223
|
+
# Get component docs and example URLs.
|
|
224
|
+
npx shadcn@latest docs button dialog select
|
|
225
|
+
|
|
226
|
+
# View registry item details (for items not yet installed).
|
|
227
|
+
npx shadcn@latest view @shadcn/button
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
**Named presets:** `base-nova`, `radix-nova`
|
|
231
|
+
**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
|
|
232
|
+
**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com).
|
|
233
|
+
|
|
234
|
+
## Detailed References
|
|
235
|
+
|
|
236
|
+
- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
|
|
237
|
+
- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
|
|
238
|
+
- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
|
|
239
|
+
- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
|
|
240
|
+
- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
|
|
241
|
+
- [cli.md](./cli.md) — Commands, flags, presets, templates
|
|
242
|
+
- [customization.md](./customization.md) — Theming, CSS variables, extending components
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
# shadcn CLI Reference
|
|
2
|
+
|
|
3
|
+
Configuration is read from `components.json`.
|
|
4
|
+
|
|
5
|
+
> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
|
|
6
|
+
|
|
7
|
+
> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
|
|
8
|
+
|
|
9
|
+
## Contents
|
|
10
|
+
|
|
11
|
+
- Commands: init, add (dry-run, smart merge), search, view, docs, info, build
|
|
12
|
+
- Templates: next, vite, start, react-router, astro
|
|
13
|
+
- Presets: named, code, URL formats and fields
|
|
14
|
+
- Switching presets
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## Commands
|
|
19
|
+
|
|
20
|
+
### `init` — Initialize or create a project
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npx shadcn@latest init [components...] [options]
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
|
|
27
|
+
|
|
28
|
+
| Flag | Short | Description | Default |
|
|
29
|
+
| ----------------------- | ----- | --------------------------------------------------------- | ------- |
|
|
30
|
+
| `--template <template>` | `-t` | Template (next, start, vite, next-monorepo, react-router) | — |
|
|
31
|
+
| `--preset [name]` | `-p` | Preset configuration (named, code, or URL) | — |
|
|
32
|
+
| `--yes` | `-y` | Skip confirmation prompt | `true` |
|
|
33
|
+
| `--defaults` | `-d` | Use defaults (`--template=next --preset=base-nova`) | `false` |
|
|
34
|
+
| `--force` | `-f` | Force overwrite existing configuration | `false` |
|
|
35
|
+
| `--cwd <cwd>` | `-c` | Working directory | current |
|
|
36
|
+
| `--name <name>` | `-n` | Name for new project | — |
|
|
37
|
+
| `--silent` | `-s` | Mute output | `false` |
|
|
38
|
+
| `--rtl` | | Enable RTL support | — |
|
|
39
|
+
| `--reinstall` | | Re-install existing UI components | `false` |
|
|
40
|
+
| `--monorepo` | | Scaffold a monorepo project | — |
|
|
41
|
+
| `--no-monorepo` | | Skip the monorepo prompt | — |
|
|
42
|
+
|
|
43
|
+
`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
|
|
44
|
+
|
|
45
|
+
### `add` — Add components
|
|
46
|
+
|
|
47
|
+
> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npx shadcn@latest add [components...] [options]
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
|
|
54
|
+
|
|
55
|
+
| Flag | Short | Description | Default |
|
|
56
|
+
| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
|
|
57
|
+
| `--yes` | `-y` | Skip confirmation prompt | `false` |
|
|
58
|
+
| `--overwrite` | `-o` | Overwrite existing files | `false` |
|
|
59
|
+
| `--cwd <cwd>` | `-c` | Working directory | current |
|
|
60
|
+
| `--all` | `-a` | Add all available components | `false` |
|
|
61
|
+
| `--path <path>` | `-p` | Target path for the component | — |
|
|
62
|
+
| `--silent` | `-s` | Mute output | `false` |
|
|
63
|
+
| `--dry-run` | | Preview all changes without writing files | `false` |
|
|
64
|
+
| `--diff [path]` | | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
|
65
|
+
| `--view [path]` | | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |
|
|
66
|
+
|
|
67
|
+
#### Dry-Run Mode
|
|
68
|
+
|
|
69
|
+
Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# Preview all changes.
|
|
73
|
+
npx shadcn@latest add button --dry-run
|
|
74
|
+
|
|
75
|
+
# Show diffs for all files (top 5).
|
|
76
|
+
npx shadcn@latest add button --diff
|
|
77
|
+
|
|
78
|
+
# Show the diff for a specific file.
|
|
79
|
+
npx shadcn@latest add button --diff button.tsx
|
|
80
|
+
|
|
81
|
+
# Show contents for all files (top 5).
|
|
82
|
+
npx shadcn@latest add button --view
|
|
83
|
+
|
|
84
|
+
# Show the full content of a specific file.
|
|
85
|
+
npx shadcn@latest add button --view button.tsx
|
|
86
|
+
|
|
87
|
+
# Works with URLs too.
|
|
88
|
+
npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
|
|
89
|
+
|
|
90
|
+
# CSS diffs.
|
|
91
|
+
npx shadcn@latest add button --diff globals.css
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
**When to use dry-run:**
|
|
95
|
+
|
|
96
|
+
- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
|
|
97
|
+
- Before overwriting existing components — use `--diff` to preview the changes first.
|
|
98
|
+
- When the user wants to inspect component source code without installing — use `--view`.
|
|
99
|
+
- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
|
|
100
|
+
- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
|
|
101
|
+
|
|
102
|
+
> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
|
|
103
|
+
|
|
104
|
+
#### Smart Merge from Upstream
|
|
105
|
+
|
|
106
|
+
See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
|
|
107
|
+
|
|
108
|
+
### `search` — Search registries
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npx shadcn@latest search <registries...> [options]
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
|
|
115
|
+
|
|
116
|
+
| Flag | Short | Description | Default |
|
|
117
|
+
| ------------------- | ----- | ---------------------- | ------- |
|
|
118
|
+
| `--query <query>` | `-q` | Search query | — |
|
|
119
|
+
| `--limit <number>` | `-l` | Max items per registry | `100` |
|
|
120
|
+
| `--offset <number>` | `-o` | Items to skip | `0` |
|
|
121
|
+
| `--cwd <cwd>` | `-c` | Working directory | current |
|
|
122
|
+
|
|
123
|
+
### `view` — View item details
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
npx shadcn@latest view <items...> [options]
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
|
|
130
|
+
|
|
131
|
+
### `docs` — Get component documentation URLs
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
npx shadcn@latest docs <components...> [options]
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
|
|
138
|
+
|
|
139
|
+
Example output for `npx shadcn@latest docs input button`:
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
base radix
|
|
143
|
+
|
|
144
|
+
input
|
|
145
|
+
docs https://ui.shadcn.com/docs/components/radix/input
|
|
146
|
+
examples https://raw.githubusercontent.com/.../examples/input-example.tsx
|
|
147
|
+
|
|
148
|
+
button
|
|
149
|
+
docs https://ui.shadcn.com/docs/components/radix/button
|
|
150
|
+
examples https://raw.githubusercontent.com/.../examples/button-example.tsx
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
|
|
154
|
+
|
|
155
|
+
### `diff` — Check for updates
|
|
156
|
+
|
|
157
|
+
Do not use this command. Use `npx shadcn@latest add --diff` instead.
|
|
158
|
+
|
|
159
|
+
### `info` — Project information
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
npx shadcn@latest info [options]
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
|
|
166
|
+
|
|
167
|
+
| Flag | Short | Description | Default |
|
|
168
|
+
| ------------- | ----- | ----------------- | ------- |
|
|
169
|
+
| `--cwd <cwd>` | `-c` | Working directory | current |
|
|
170
|
+
|
|
171
|
+
**Project Info fields:**
|
|
172
|
+
|
|
173
|
+
| Field | Type | Meaning |
|
|
174
|
+
| -------------------- | --------- | ------------------------------------------------------------------ |
|
|
175
|
+
| `framework` | `string` | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
|
|
176
|
+
| `frameworkVersion` | `string` | Framework version (e.g. `15.2.4`) |
|
|
177
|
+
| `isSrcDir` | `boolean` | Whether the project uses a `src/` directory |
|
|
178
|
+
| `isRSC` | `boolean` | Whether React Server Components are enabled |
|
|
179
|
+
| `isTsx` | `boolean` | Whether the project uses TypeScript |
|
|
180
|
+
| `tailwindVersion` | `string` | `"v3"` or `"v4"` |
|
|
181
|
+
| `tailwindConfigFile` | `string` | Path to the Tailwind config file |
|
|
182
|
+
| `tailwindCssFile` | `string` | Path to the global CSS file |
|
|
183
|
+
| `aliasPrefix` | `string` | Import alias prefix (e.g. `@`, `~`, `@/`) |
|
|
184
|
+
| `packageManager` | `string` | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`) |
|
|
185
|
+
|
|
186
|
+
**Components.json fields:**
|
|
187
|
+
|
|
188
|
+
| Field | Type | Meaning |
|
|
189
|
+
| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
|
|
190
|
+
| `base` | `string` | Primitive library (`radix` or `base`) — determines component APIs and available props |
|
|
191
|
+
| `style` | `string` | Visual style (e.g. `nova`, `vega`) |
|
|
192
|
+
| `rsc` | `boolean` | RSC flag from config |
|
|
193
|
+
| `tsx` | `boolean` | TypeScript flag |
|
|
194
|
+
| `tailwind.config` | `string` | Tailwind config path |
|
|
195
|
+
| `tailwind.css` | `string` | Global CSS path — this is where custom CSS variables go |
|
|
196
|
+
| `iconLibrary` | `string` | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
|
|
197
|
+
| `aliases.components` | `string` | Component import alias (e.g. `@/components`) |
|
|
198
|
+
| `aliases.utils` | `string` | Utils import alias (e.g. `@/lib/utils`) |
|
|
199
|
+
| `aliases.ui` | `string` | UI component alias (e.g. `@/components/ui`) |
|
|
200
|
+
| `aliases.lib` | `string` | Lib alias (e.g. `@/lib`) |
|
|
201
|
+
| `aliases.hooks` | `string` | Hooks alias (e.g. `@/hooks`) |
|
|
202
|
+
| `resolvedPaths` | `object` | Absolute file-system paths for each alias |
|
|
203
|
+
| `registries` | `object` | Configured custom registries |
|
|
204
|
+
|
|
205
|
+
**Links fields:**
|
|
206
|
+
|
|
207
|
+
The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
|
|
208
|
+
|
|
209
|
+
### `build` — Build a custom registry
|
|
210
|
+
|
|
211
|
+
```bash
|
|
212
|
+
npx shadcn@latest build [registry] [options]
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
|
|
216
|
+
|
|
217
|
+
| Flag | Short | Description | Default |
|
|
218
|
+
| ----------------- | ----- | ----------------- | ------------ |
|
|
219
|
+
| `--output <path>` | `-o` | Output directory | `./public/r` |
|
|
220
|
+
| `--cwd <cwd>` | `-c` | Working directory | current |
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
## Templates
|
|
225
|
+
|
|
226
|
+
| Value | Framework | Monorepo support |
|
|
227
|
+
| -------------- | -------------- | ---------------- |
|
|
228
|
+
| `next` | Next.js | Yes |
|
|
229
|
+
| `vite` | Vite | Yes |
|
|
230
|
+
| `start` | TanStack Start | Yes |
|
|
231
|
+
| `react-router` | React Router | Yes |
|
|
232
|
+
| `astro` | Astro | Yes |
|
|
233
|
+
| `laravel` | Laravel | No |
|
|
234
|
+
|
|
235
|
+
All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
|
|
236
|
+
|
|
237
|
+
---
|
|
238
|
+
|
|
239
|
+
## Presets
|
|
240
|
+
|
|
241
|
+
Three ways to specify a preset via `--preset`:
|
|
242
|
+
|
|
243
|
+
1. **Named:** `--preset base-nova` or `--preset radix-nova`
|
|
244
|
+
2. **Code:** `--preset a2r6bw` (base62 string, starts with lowercase `a`)
|
|
245
|
+
3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
|
|
246
|
+
|
|
247
|
+
> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
|
|
248
|
+
|
|
249
|
+
## Switching Presets
|
|
250
|
+
|
|
251
|
+
Ask the user first: **reinstall**, **merge**, or **skip** existing components?
|
|
252
|
+
|
|
253
|
+
- **Re-install** → `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all component files with the new preset styles. Use when the user hasn't customized components.
|
|
254
|
+
- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
|
|
255
|
+
- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
|
|
256
|
+
|
|
257
|
+
Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
|