Installation

Install any item from Design System UI Vue with the shadcn-vue CLI. Replace button with the item name from the catalog.

Start with styles so your project has the design system CSS foundation before adding components.

Configure the registry

Your project must already be set up with shadcn-vue. Then add this registry to components.json so the CLI can resolve @design-system-ui-vue/* items:

{
  "registries": {
    "@design-system-ui-vue": "https://design-system-registry-vue.vercel.app/r/{name}.json"
  }
}

Update the URL to your deployed homepage from registry/config.ts. Do this once per project. Without it, installs fail with Unknown registry "@design-system-ui-vue".

Install an item

Add a specific item by its name from the catalog. Swap sidebar below for any item you want (button, spinner, and so on).

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/sidebar.json

On Bun, use bun x --bun (space after bun). bunx --bun fails when adding a registry URL such as styles.json or button.json.

Find the exact command

Every item page has a copy-ready command with a tab for each package manager. Browse components, blocks, and utilities, open an item such as sidebar, and copy its exact install command from the Installation section.