/shadcn-vue

name: shadcn-vue
description: "shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, or encountering component imports, dark mode, Reka UI errors."

metadata:
  keywords:
    - shadcn-vue
    - shadcn vue
    - Reka UI
    - radix-vue
    - Vue components
    - Nuxt components
    - Tailwind CSS
    - accessible components
    - headless ui
    - Auto Form
    - Zod validation
    - TanStack Table
    - data tables
    - Unovis charts
    - dark mode
    - useColorMode
    - components.json
    - bunx shadcn-vue
    - vueuse
    - composables
    - Vue 3
    - Nuxt 3
    - TypeScript
    - accessibility
    - ARIA
    - component library
    - UI components
    - form builder
    - schema validation

license: MIT

shadcn-vue Production Stack

**Production-tested**: Vue/Nuxt applications with accessible, customizable components **Last Updated**: 2025-12-09 **Status**: Production Ready ✅ **Latest Version**: shadcn-vue@latest (Reka UI v2) **Dependencies**: Tailwind CSS, Reka UI, Vue 3+ or Nuxt 3+

---

Quick Start (3 Minutes)

For Vue Projects (Vite)

1. Initialize shadcn-vue

# Using Bun (recommended)
bunx shadcn-vue@latest init

# Using npm
npx shadcn-vue@latest init

**During initialization**:

• Style: `New York` or `Default` (cannot change later!)
• Base color: `Slate` (recommended)
• CSS variables: `Yes` (required for dark mode)

2. Configure TypeScript Path Aliases

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

3. Configure Vite

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite' // Tailwind v4
import path from 'path'

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

4. Add Your First Component

bunx shadcn-vue@latest add button
# or: npx shadcn-vue@latest add button

**See Full Setup**: `templates/quick-setup.ts`

---

For Nuxt Projects

# Create project with Tailwind
bun create nuxt-app my-app
cd my-app
bun add -D @nuxtjs/tailwindcss

# Configure Nuxt
# nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

# Initialize shadcn-vue
bunx shadcn-vue@latest init
# or: npx shadcn-vue@latest init
# or: pnpm dlx shadcn-vue@latest init

---

Component Library (50+ Components)

Navigation & Layout

• Accordion, Alert Dialog, Avatar, Badge, Breadcrumb, Card, Carousel, Collapsible, Dialog, Drawer, Dropdown Menu, Menu Bar, Navigation Menu, Pagination, Popover, Resizable, Scroll Area, Sheet, Sidebar, Tabs, Toast, Tooltip

Form Components

• Auto Form, Button, Calendar, Checkbox, Combobox, Command, Context Menu, Date Picker, Form, Input, Input OTP, Label, Number Field, PIN Input, Radio Group, Range Calendar, Select, Slider, Sonner, Switch, Textarea, Toggle, Toggle Group

Data Display

• Aspect Ratio, Data Table, Skeleton, Stepper, Splitter, Table, Tag Input

Advanced

• Charts (Unovis), Color Picker, Editable, File Upload, Sortable

**Full Component Reference**: https://shadcn-vue.com/docs/components

---

Auto Form - Schema-Based Forms

Installation

bunx shadcn-vue@latest add auto-form
# or: npx shadcn-vue@latest add auto-form

bun add zod
# or: npm install zod

Basic Usage

<script setup lang="ts">
import { AutoForm } from '@/components/ui/auto-form'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.email({ error: 'Invalid email' }),
  age: z.number().min(18, 'Must be 18 or older'),
  bio: z.string().optional(),
  subscribe: z.boolean().default(false)
})

function onSubmit(values: z.infer<typeof schema>) {
  console.log('Form submitted:', values)
}
</script>

<template>
  <AutoForm :schema="schema" @submit="onSubmit">
    <template #submit>
      <Button type="submit">Submit</Button>
    </template>
  </AutoForm>
</template>

**Supported Field Types**: string, number, boolean, date, enum, array, object

---

Data Tables with TanStack Table

Installation

bunx shadcn-vue@latest add data-table
# or: npx shadcn-vue@latest add data-table

bun add @tanstack/vue-table
# or: npm install @tanstack/vue-table

Basic Setup

<script setup lang="ts">
import { DataTable } from '@/components/ui/data-table'
import { h } from 'vue'

const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  }
]

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

<template>
  <DataTable :columns="columns" :data="data" />
</template>

**Features**: Sorting, filtering, pagination, row selection, column visibility, expandable rows

---

Dark Mode Implementation

Installation

bun add @vueuse/core
# or: npm install @vueuse/core

Setup Theme Provider

<!-- components/ThemeProvider.vue -->
<script setup lang="ts">
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()
</script>

<template>
  <div :class="mode">
    <slot />
  </div>
</template>

Use in Components

<script setup>
import { useColorMode } from '@vueuse/core'

const mode = useColorMode()

function toggleTheme() {
  mode.value = mode.value === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <Button @click="toggleTheme">
    {{ mode === 'dark' ? '🌙' : '☀️' }}
  </Button>
</template>

---

Critical Rules

Always Do

✅ **Run `init` before adding components**

• Creates required configuration and utilities
• Sets up path aliases

✅ **Use CSS variables for theming** (`cssVariables: true`) -