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

Option	Description
-t, --template <template>	Framework template: nuxt, vite, or vite-router
-p, --preset <preset>	Use a preset: reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira
--base <base>	Component library: reka
--style <style>	Visual style: vega, nova, maia, lyra, mira
--icon-library <lib>	Icon library: lucide, tabler, hugeicons, phosphor, remixicon
--font <font>	Font: inter, figtree, jetbrains-mono, geist, geist-mono
-b, --base-color <color>	Base color: neutral, gray, zinc, stone, slate
-y, --yes	Skip confirmation prompts

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

Option	Description
--base <base>	Component library: reka
--style <style>	Visual style: vega, nova, maia, lyra, mira
--icon-library <lib>	Icon library: lucide, tabler, hugeicons, phosphor, remixicon
--font <font>	Font: inter, figtree, jetbrains-mono, geist, geist-mono
-b, --base-color <color>	Base color: neutral, gray, zinc, stone, slate
-d, --defaults	Use default configuration
-y, --yes	Skip confirmation prompts

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:

Style	Description
Vega	The classic shadcn/ui look. Clean, neutral, and familiar.
Nova	Reduced padding and margins for compact layouts.
Maia	Soft and rounded, with generous spacing.
Lyra	Boxy and sharp. Pairs well with mono fonts.
Mira	Compact. Made for dense interfaces.

Presets

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

Preset	Style	Icons	Font
reka-vega	Vega	Lucide	Inter
reka-nova	Nova	Hugeicons	Inter
reka-maia	Maia	Hugeicons	Figtree
reka-lyra	Lyra	Hugeicons	JetBrains Mono
reka-mira	Mira	Hugeicons	Inter

Documentation

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

License

Licensed under the MIT license.