shadcn-vue

Version: shadcn-vue@2.8.2 (prepared source package.json:4; npm latest dist-tag, checked 2026-09-22). Stack: Vue 3.5+, reka-ui ^2.10.1, Tailwind CSS ^4.3.2 (package.json:68,88,91). One base: reka. Run the CLI with pnpm dlx shadcn-vue@latest <command> (or npx, npm exec, bunx).

What it does

The CLI copies component source files into your project and installs their npm dependencies. You own the copied code. Edit components/ui/** freely; re-running add with -o, --overwrite replaces your edits.

Core workflow

# New or existing project: write components.json, install deps, set up CSS
pnpm dlx shadcn-vue@latest init

# Add components (also: URL, local file, @namespace/item, owner/repo/item)
pnpm dlx shadcn-vue@latest add button card dialog

# Preview without writing, then install
pnpm dlx shadcn-vue@latest add sidebar --dry-run
pnpm dlx shadcn-vue@latest add sidebar

# Usage docs and examples for a component
pnpm dlx shadcn-vue@latest docs button

Rules that prevent bugs

Item names resolve in this order: URL, local file, @namespace/item, owner/repo/item[#ref], then plain name in the default registry (dist/registry-hxzbzXMt.js:1870-1891, https://www.shadcn-vue.com/docs/cli#add).
Preset names have no prefix in 2.8.x: vega, nova, maia, lyra, mira, luma, sera (dist/registry-hxzbzXMt.js:3141-3244). Older docs and the 2.6.x baseline used reka-vega style names; those fail now. See changes.
toast and toaster are deprecated; use sonner (dist/transform-menu-CLNZ5vUh.js:446-454).
lucide-vue-next is the legacy icon package; current lucide package is @lucide/vue (dist/transform-menu-CLNZ5vUh.js:457, dist/icons/index.d.ts:3-10). Run migrate icons to switch libraries.
Registry style ids stay prefixed: the vega style fetches from reka-vega (dist/registry-hxzbzXMt.js:492-496). Fallback style id is new-york-v4.
apply <preset> rewrites UI components, fonts, and CSS variables. Commit first; the CLI warns the same (dist/index.js:2252-2254).
Registry env: SHADCN_VUE_URL and REGISTRY_URL override the default https://shadcn-vue.com/r (dist/transform-menu-CLNZ5vUh.js:2-3). Use for local registry testing.
Builtin namespace is @shadcn (dist/transform-menu-CLNZ5vUh.js:445). Third-party namespaces must be configured in components.json under registries.

Command map

| Command | Purpose | Key options | | --- | --- | --- | | init (alias create) | Set up project, write components.json | -p <preset>, -t <template>, --style, --icon-library, --font, -b <base-color>, -d, --silent | | add | Install items | -o, -a, -p <path>, --dry-run, --diff, --view | | apply | Apply a preset to an existing project | -y | | view | Inspect items before install | -c <cwd> | | search (alias list) | Fuzzy search registries (@name args) | -q, -l, -o | | docs | Component docs and examples | --json, -b <base> | | info | Project setup report | --json | | diff | Compare installed item against registry | -y | | migrate | icons or rtl migration | -l, [path] | | build | Build registry.json into registry JSON | -o <path> | | mcp init | Write MCP client config | --client claude\|cursor\|vscode |

Full flags: cli reference.

Configuration

components.json at project root drives everything. Key fields: style, typescript, tailwind.css, tailwind.baseColor, aliases, iconLibrary, rtl, pointer, menuColor, menuAccent, registries. Full schema and examples: components-json reference.

Styles and presets

Seven named presets (vega to sera), eight valid styles in encoded preset codes (adds rhea), five icon libraries, 24 fonts. Details and tables: styles reference.

Programmatic API

Import from shadcn-vue, shadcn-vue/registry, shadcn-vue/schema, shadcn-vue/utils, shadcn-vue/icons, shadcn-vue/preset, shadcn-vue/mcp, shadcn-vue/tailwind.css (package.json:27-59). Exports and error classes: registries reference.

shadcn-vue-skilld