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

<template>
  <Button>Click me</Button>
</template>

When to Use

Activate this skill when:

Setting up shadcn-vue in a new project
Adding shadcn-vue components (button, input, dialog, etc.)
Customizing component variants or theming
Working with Radix Vue primitives
User mentions "shadcn", "shadcn-vue", "radix-vue"

Critical Rules

Copy-paste approach - Components are copied to your project, not installed as package
Tailwind required - shadcn-vue requires Tailwind CSS
Customizable - Modify components after copying (they're yours)
Radix Vue primitives - Accessible headless UI under the hood
TypeScript support - Full TypeScript support with proper types

Reference Guide

Core Concepts

Concept	Reference	When to consult
Overview	overview.md	Setting up shadcn-vue
Components	components.md	Using specific components
Theming	theming.md	Customizing colors/styles

Quick Reference

Installation

# Initialize shadcn-vue
pnpm dlx shadcn-vue@latest init

# Interactive prompts:
# - TypeScript: Yes
# - Framework: Nuxt / Vite
# - Root dir: .
# - Components dir: @/components
# - Utils dir: @/lib/utils
# - Alias: @/

# Add components
pnpm dlx shadcn-vue@latest add button input card dialog

components.json Configuration

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "css": "assets/css/index.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "framework": "vite",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Common Components

<script setup lang="ts">
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Input,
  Label,
} from '@/components/ui'
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card description goes here</CardDescription>
    </CardHeader>
    <CardContent>
      <div class="flex flex-col gap-4">
        <div>
          <Label for="email">Email</Label>
          <Input id="email" type="email" placeholder="Email" />
        </div>
        <Button>Submit</Button>
      </div>
    </CardContent>
  </Card>
</template>

Button Variants

<template>
  <div class="flex gap-2">
    <Button variant="default">Default</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="link">Link</Button>
  </div>

  <div class="flex gap-2">
    <Button size="default">Default</Button>
    <Button size="sm">Small</Button>
    <Button size="lg">Large</Button>
    <Button size="icon">🔥</Button>
  </div>
</template>

Dialog Component

<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'

const isOpen = ref(false)
</script>

<template>
  <Dialog v-model:open="isOpen">
    <DialogTrigger as-child>
      <Button variant="outline">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <Button variant="outline" @click="isOpen = false">Cancel</Button>
        <Button variant="destructive">Confirm</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Form Components

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

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

const form = useForm({
  validationSchema: formSchema,
})

const onSubmit = form.handleSubmit((values) => {
  console.log(values)
})
</script>

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

    <FormField v-slot="{ componentField }" name="email">
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input type="email" placeholder="Email" v-bind="componentField" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <Button type="submit">Submit</Button>
  </Form>
</template>

Data Table

<script setup lang="ts">
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

const data = [
  { id: 1, name: 'John', email: 'john@example.com' },
  { id: 2, name: 'Jane', email: 'jane@example.com' },
]
</script>

<template>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Email</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow v-for="item in data" :key="item.id">
        <TableCell>{{ item.name }}</TableCell>
        <TableCell>{{ item.email }}</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>

Available Components

Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Badge, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Dropdown Menu, Form, Hover Card, Input, Input OTP, Label, Menubar, Navigation Menu, Pagination, Popover, Progress, Radio Group, Resizable, Scroll Area, Select, Separator, Sheet, Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip.

Related Skills

vue-js: Vue composition API
nuxt-ui: Alternative component library
design-systems: Design tokens and variants
html-css: Tailwind CSS utilities

shadcn-vue

shadcn-vue Skill

Quick Start