Styles

Before components look correct, add the design system style files. This installs globals.css and its theme files into src/styles/.

Prerequisites

Your project should already be set up with shadcn-vue and Tailwind CSS. After shadcn-vue init, the CSS file named in components.json under tailwind.css must already exist (often src/style.css or src/styles/globals.css). The CLI opens that path on every add to update CSS variables; a missing file fails with ENOENT.

Add the Design System UI Vue registry to components.json (once per project):

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

Without this, the CLI returns Unknown registry "@design-system-ui-vue". See Installation for the full setup flow.

Install

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

What gets installed

theme-secondary.css and theme-tertiary.css are optional accent palettes — globals.css imports both, but they only apply to an element carrying data-theme="theme-secondary" or data-theme="theme-tertiary". See Theming for how to use them.

If any of these files already exist under src/styles/, the CLI may ask before overwriting them.

Import in your app

1. Set tailwind.css in components.json to src/styles/globals.css.
2. Import the globals entry once from your app entry (Vite main.ts, Nuxt css array, etc.):

import "@/styles/globals.css";

globals.css already imports ./theme.css, so you do not need a second import for the theme tokens. You can remove the temporary CSS file left over from init once everything imports src/styles/globals.css instead.

Next steps

Browse components, blocks, and utilities, then follow each item page's install command.