Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Add, manage, and compose shadcn/ui components with correct patterns, styling, and CLI workflows.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
cli.md
1# shadcn CLI Reference23Configuration is read from `components.json`.45> **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.67> **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.89## Contents1011- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build12- Templates: next, vite, start, react-router, astro13- Presets: named, code, URL formats and fields14- Switching presets1516---1718## Commands1920### `init` — Initialize or create a project2122```bash23npx shadcn@latest init [components...] [options]24```2526Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.2728| 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 | — |4243`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.4445### `apply` — Apply a preset to an existing project4647```bash48npx shadcn@latest apply [preset] [options]49```5051Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components.5253| Flag | Short | Description | Default |54| ------------------- | ----- | ------------------------------------------ | ------- |55| `--preset <preset>` | — | Preset configuration (named, code, or URL) | — |56| `--yes` | `-y` | Skip confirmation prompt | `false` |57| `--cwd <cwd>` | `-c` | Working directory | current |58| `--silent` | `-s` | Mute output | `false` |5960`[preset]` is a shorthand for `--preset <preset>`. If both are provided, they must match.61If no preset is provided, the CLI offers to open the custom preset builder on `ui.shadcn.com/create`.6263### `add` — Add components6465> **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.6667```bash68npx shadcn@latest add [components...] [options]69```7071Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.7273| Flag | Short | Description | Default |74| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |75| `--yes` | `-y` | Skip confirmation prompt | `false` |76| `--overwrite` | `-o` | Overwrite existing files | `false` |77| `--cwd <cwd>` | `-c` | Working directory | current |78| `--all` | `-a` | Add all available components | `false` |79| `--path <path>` | `-p` | Target path for the component | — |80| `--silent` | `-s` | Mute output | `false` |81| `--dry-run` | | Preview all changes without writing files | `false` |82| `--diff [path]` | | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |83| `--view [path]` | | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | — |8485#### Dry-Run Mode8687Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.8889```bash90# Preview all changes.91npx shadcn@latest add button --dry-run9293# Show diffs for all files (top 5).94npx shadcn@latest add button --diff9596# Show the diff for a specific file.97npx shadcn@latest add button --diff button.tsx9899# Show contents for all files (top 5).100npx shadcn@latest add button --view101102# Show the full content of a specific file.103npx shadcn@latest add button --view button.tsx104105# Works with URLs too.106npx shadcn@latest add https://api.npoint.io/abc123 --dry-run107108# CSS diffs.109npx shadcn@latest add button --diff globals.css110```111112**When to use dry-run:**113114- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.115- Before overwriting existing components — use `--diff` to preview the changes first.116- When the user wants to inspect component source code without installing — use `--view`.117- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.118- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.119120> **`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.121122#### Smart Merge from Upstream123124See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.125126### `search` — Search registries127128```bash129npx shadcn@latest search <registries...> [options]130```131132Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.133134| Flag | Short | Description | Default |135| ------------------- | ----- | ---------------------- | ------- |136| `--query <query>` | `-q` | Search query | — |137| `--limit <number>` | `-l` | Max items per registry | `100` |138| `--offset <number>` | `-o` | Items to skip | `0` |139| `--cwd <cwd>` | `-c` | Working directory | current |140141### `view` — View item details142143```bash144npx shadcn@latest view <items...> [options]145```146147Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.148149### `docs` — Get component documentation URLs150151```bash152npx shadcn@latest docs <components...> [options]153```154155Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.156157Example output for `npx shadcn@latest docs input button`:158159```160base radix161162input163docs https://ui.shadcn.com/docs/components/radix/input164examples https://raw.githubusercontent.com/.../examples/input-example.tsx165166button167docs https://ui.shadcn.com/docs/components/radix/button168examples https://raw.githubusercontent.com/.../examples/button-example.tsx169```170171Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).172173### `diff` — Check for updates174175Do not use this command. Use `npx shadcn@latest add --diff` instead.176177### `info` — Project information178179```bash180npx shadcn@latest info [options]181```182183Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.184185| Flag | Short | Description | Default |186| ------------- | ----- | ----------------- | ------- |187| `--cwd <cwd>` | `-c` | Working directory | current |188189**Project Info fields:**190191| Field | Type | Meaning |192| -------------------- | --------- | ------------------------------------------------------------------ |193| `framework` | `string` | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |194| `frameworkVersion` | `string` | Framework version (e.g. `15.2.4`) |195| `isSrcDir` | `boolean` | Whether the project uses a `src/` directory |196| `isRSC` | `boolean` | Whether React Server Components are enabled |197| `isTsx` | `boolean` | Whether the project uses TypeScript |198| `tailwindVersion` | `string` | `"v3"` or `"v4"` |199| `tailwindConfigFile` | `string` | Path to the Tailwind config file |200| `tailwindCssFile` | `string` | Path to the global CSS file |201| `aliasPrefix` | `string` | Import alias prefix (e.g. `@`, `~`, `@/`) |202| `packageManager` | `string` | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`) |203204**Components.json fields:**205206| Field | Type | Meaning |207| -------------------- | --------- | ------------------------------------------------------------------------------------------ |208| `base` | `string` | Primitive library (`radix` or `base`) — determines component APIs and available props |209| `style` | `string` | Visual style (e.g. `nova`, `vega`) |210| `rsc` | `boolean` | RSC flag from config |211| `tsx` | `boolean` | TypeScript flag |212| `tailwind.config` | `string` | Tailwind config path |213| `tailwind.css` | `string` | Global CSS path — this is where custom CSS variables go |214| `iconLibrary` | `string` | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |215| `aliases.components` | `string` | Component import alias (e.g. `@/components`) |216| `aliases.utils` | `string` | Utils import alias (e.g. `@/lib/utils`) |217| `aliases.ui` | `string` | UI component alias (e.g. `@/components/ui`) |218| `aliases.lib` | `string` | Lib alias (e.g. `@/lib`) |219| `aliases.hooks` | `string` | Hooks alias (e.g. `@/hooks`) |220| `resolvedPaths` | `object` | Absolute file-system paths for each alias |221| `registries` | `object` | Configured custom registries |222223**Links fields:**224225The `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.226227### `build` — Build a custom registry228229```bash230npx shadcn@latest build [registry] [options]231```232233Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.234235| Flag | Short | Description | Default |236| ----------------- | ----- | ----------------- | ------------ |237| `--output <path>` | `-o` | Output directory | `./public/r` |238| `--cwd <cwd>` | `-c` | Working directory | current |239240---241242## Templates243244| Value | Framework | Monorepo support |245| -------------- | -------------- | ---------------- |246| `next` | Next.js | Yes |247| `vite` | Vite | Yes |248| `start` | TanStack Start | Yes |249| `react-router` | React Router | Yes |250| `astro` | Astro | Yes |251| `laravel` | Laravel | No |252253All 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.254255---256257## Presets258259Three ways to specify a preset via `--preset`:2602611. **Named:** `--preset nova` or `--preset lyra`2622. **Code:** `--preset a2r6bw` (version-prefixed base62 string, e.g. `a2r6bw` or `b0`)2633. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`264265> **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.266> Use `npx shadcn@latest apply --preset <code>` when overwriting an existing project's preset.267268## Switching Presets269270Ask the user first: **overwrite**, **merge**, or **skip** existing components?271272- **Overwrite / Re-install** → `npx shadcn@latest apply --preset <code>`. Overwrites all detected component files with the new preset styles. Use when the user hasn't customized components.273- **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.274- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.275276Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. 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.277