CLI

Use the CLI to add components to your project.

init ​

Use the init command to initialize configuration and dependencies for a new project.

The init command installs dependencies, adds the cn, useEmitsAsProps utils, configures tailwind.config.cjs, and creates CSS variables for the project.

bash
npx shadcn-vue@latest init

You will be asked a few questions to configure components.json:

Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils

Options ​

Usage: shadcn-vue init [options]

initialize your project and install dependencies

Options:
  -y, --yes        skip confirmation prompt. (default: false)
  -c, --cwd <cwd>  the working directory. (default: the current directory)
  -h, --help       display help for command

add ​

Use the add command to add components and dependencies to your project.

bash
npx shadcn-vue@latest add [component]

You will be presented with a list of components to choose from:

Which components would you like to add? › Space to select. Return to submit.

◯  accordion
◯  alert
◯  alert-dialog
◯  aspect-ratio
◯  avatar
◯  badge
◯  button
◯  card
◯  checkbox
◯  collapsible

Options ​

Usage: shadcn-vue add [options] [components...]

add components to your project

Arguments:
  components         name of components

Options:
  --nodep            disable adding & installing dependencies (advanced) (default: false)
  -y, --yes          Skip confirmation prompt. (default: false)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. (default: the current directory)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command

update ​

Use the update command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.

We plan on improving this command in the future to improve the update experience.

Usage: shadcn-vue update [options] [components...]

update components in your project

Arguments:
  components       name of components

Options:
  -c, --cwd <cwd>  the working directory. (default: the current directory)
  -h, --help       display help for command
Edit this page on GitHub