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