shadcn-vue

shadcn-vue

A CLI for adding components to your project.

Usage

create

Use the create command to scaffold a new Vue project with shadcn-vue pre-configured.

npx shadcn-vue create

The create command will:

• Create a new Vue project (Nuxt, Vite, or Vite + Vue Router)
• Configure Tailwind CSS
• Set up shadcn-vue with your chosen design system

Options

Examples

# Interactive mode
npx shadcn-vue create

# Use a preset
npx shadcn-vue create --preset reka-nova

# Full customization
npx shadcn-vue create --template nuxt --style maia --icon-library hugeicons --font figtree

init

Use the init command to initialize dependencies for an existing project.

The init command installs dependencies, adds the cn util, configures tailwind.config.js, and CSS variables for the project.

npx shadcn-vue init

Options

add

Use the add command to add components to your project.

The add command adds a component to your project and installs all required dependencies.

npx shadcn-vue add [component]

Example

npx shadcn-vue add alert-dialog

You can also run the command without any arguments to view a list of all available components:

npx shadcn-vue add

Visual Styles

shadcn-vue supports 5 visual styles that transform how components look:

Presets

Presets are pre-configured combinations of style, icons, and fonts:

Documentation

Visit http://shadcn-vue.com to view the documentation.

License

Licensed under the MIT license.