vuejs-shadcn

name	vuejs-shadcn
description	shadcn/vue UI component library for Vue 3. Use when building UI with shadcn-vue components, installing components via CLI, theming, dark mode, forms with VeeValidate/Zod, or any shadcn-vue component implementation (Button, Dialog, Form, Table, etc.).

shadcn/vue

Beautifully designed components built with Radix Vue and Tailwind CSS. Copy and paste into your apps.

Installation (Vite)

1. Create Project

pnpm create vite@latest my-vue-app --template vue-ts

2. Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Replace src/style.css:

@import "tailwindcss";

3. Configure Path Aliases

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

vite.config.ts:

import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') }
  }
})

4. Run CLI

pnpm dlx shadcn-vue@latest init

5. Add Components

pnpm dlx shadcn-vue@latest add button

For Nuxt, Laravel, or Astro setup, see references/installation.md

CLI Commands

Command	Description
shadcn-vue init	Initialize project with dependencies and config
shadcn-vue add [component]	Add specific component(s)
shadcn-vue add --all	Add all components
shadcn-vue update [component]	Update component(s)

For full CLI options, see references/cli.md

Basic Component Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button variant="outline">Click me</Button>
</template>

Component Categories

Layout & Containers

Card, Dialog, Sheet, Drawer, Sidebar, Collapsible, Resizable, Scroll Area, Separator, Aspect Ratio

Form Controls

Button, Input, Textarea, Select, Checkbox, Radio Group, Switch, Slider, Toggle, Toggle Group, Form, Field, Label, Number Field, Pin Input, Tags Input, Combobox, Date Picker, Calendar

Navigation

Tabs, Navigation Menu, Menubar, Breadcrumb, Pagination, Stepper

Feedback & Overlay

Dialog, Alert Dialog, Popover, Tooltip, Hover Card, Dropdown Menu, Context Menu, Toast, Sonner, Alert, Progress, Skeleton, Spinner

Data Display

Table, Data Table, Avatar, Badge, Card, Carousel, Accordion, Empty

For detailed component APIs, see:

• references/components-form.md - Form controls and inputs
• references/components-layout.md - Layout and containers
• references/components-overlay.md - Dialogs, popovers, menus
• references/components-data.md - Tables, lists, data display
• references/components-feedback.md - Alerts, toasts, progress

Theming

CSS Variables (Default)

<div class="bg-background text-foreground" />
<div class="bg-primary text-primary-foreground" />
<div class="bg-muted text-muted-foreground" />
<div class="bg-destructive text-destructive-foreground" />

Core Variables

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --accent: oklch(0.97 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

For complete theming guide, see references/theming.md

Dark Mode (Vite)

<script setup lang="ts">
import { useColorMode } from '@vueuse/core'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

const mode = useColorMode()
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">Toggle theme</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @click="mode = 'light'">Light</DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'dark'">Dark</DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'auto'">System</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Forms with VeeValidate + Zod

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const formSchema = toTypedSchema(z.object({
  username: z.string().min(2).max(50),
}))

const form = useForm({ validationSchema: formSchema })

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted!', values)
})
</script>

<template>
  <form @submit="onSubmit">
    <FormField v-slot="{ componentField }" name="username">
      <FormItem>
        <FormLabel>Username</FormLabel>
        <FormControl>
          <Input placeholder="shadcn" v-bind="componentField" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
    <Button type="submit">Submit</Button>
  </form>
</template>

For complete form guide, see references/forms.md

Project Structure

├── src/
│   ├── components/
│   │   └── ui/
│   │       ├── button/
│   │       │   └── Button.vue
│   │       ├── dialog/
│   │       │   ├── Dialog.vue
│   │       │   └── ...
│   │       └── ...
│   ├── lib/
│   │   └── utils.ts
│   └── assets/
│       └── index.css
├── components.json
└── tailwind.config.js

References

File	Content
references/installation.md	Vite, Nuxt, Laravel, Astro setup
references/cli.md	CLI commands and options
references/theming.md	CSS variables, colors, dark mode
references/forms.md	VeeValidate, Zod, TanStack Form
references/components-form.md	Button, Input, Select, Checkbox, etc.
references/components-layout.md	Card, Dialog, Sheet, Sidebar, etc.
references/components-overlay.md	Popover, Tooltip, Dropdown Menu, etc.
references/components-data.md	Table, Data Table, Avatar, Badge, etc.
references/components-feedback.md	Alert, Toast, Progress, Skeleton, etc.