**Production-tested**: Vue/Nuxt applications with accessible, customizable components
/plugin marketplace add secondsky/claude-skills/plugin install shadcn-vue@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/components.jsonassets/nuxt.config.tsassets/tailwind.cssassets/tsconfig.jsonassets/vite.config.tsreferences/component-examples.mdreferences/dark-mode-setup.mdreferences/error-catalog.mdscripts/quick-setup.shtemplates/quick-setup.tsProduction-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+
# Using Bun (recommended)
bunx shadcn-vue@latest init
# Using npm
npx shadcn-vue@latest init
During initialization:
New York or Default (cannot change later!)Slate (recommended)Yes (required for dark mode)// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
// 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')
}
}
})
bunx shadcn-vue@latest add button
# or: npx shadcn-vue@latest add button
See Full Setup: templates/quick-setup.ts
# 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
Full Component Reference: https://shadcn-vue.com/docs/components
bunx shadcn-vue@latest add auto-form
# or: npx shadcn-vue@latest add auto-form
bun add zod
# or: npm install zod
<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.string().email('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
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
<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
bun add @vueuse/core
# or: npm install @vueuse/core
<!-- components/ThemeProvider.vue -->
<script setup lang="ts">
import { useColorMode } from '@vueuse/core'
const mode = useColorMode()
</script>
<template>
<div :class="mode">
<slot />
</div>
</template>
<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>
ā
Run init before adding components
ā
Use CSS variables for theming (cssVariables: true)
ā Configure TypeScript path aliases
components.json aliasesā Keep components.json in version control
ā Use Bun for faster installs (recommended)
ā Don't change style after initialization
ā Don't mix Radix Vue and Reka UI v2
ā Don't skip TypeScript configuration
ā Don't use without Tailwind CSS
Error: Cannot find module '@/components/ui/button'
Solution:
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Error: Components render without styles
Solution:
/* src/assets/index.css */
@import "tailwindcss";
// vite.config.ts (Tailwind v4)
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()]
})
Error: Theme colors not applying, gray/transparent components
Solution: Ensure all CSS variables are defined (run init command)
Error: Components look different than expected
Solution: Choose carefully during init (New York or Default) - cannot change later without reinstall
Error: Type conflicts, duplicate components
Solution:
bunx shadcn-vue@latest for Reka UI v2bunx shadcn-vue@radix for legacy Radix VueError: Components installed in wrong directory
Solution: Use -c flag to specify workspace:
bunx shadcn-vue@latest init -c ./apps/web
bunx shadcn-vue@latest add button -c ./apps/web
Error: Import paths broken after editing components.json
Solution: Keep components.json and tsconfig.json aliases in sync. Test imports after any config changes.
See All 7 Issues: references/error-catalog.md
# Initialize in current directory
bunx shadcn-vue@latest init
# or: npx shadcn-vue@latest init
# Initialize in specific directory (monorepo)
bunx shadcn-vue@latest init -c ./apps/web
# or: npx shadcn-vue@latest init -c ./apps/web
# Add single component
bunx shadcn-vue@latest add button
# or: npx shadcn-vue@latest add button
# Add multiple components
bunx shadcn-vue@latest add button card dialog
# Add all components
bunx shadcn-vue@latest add --all
# or: npx shadcn-vue@latest add --all
# Check for component updates
bunx shadcn-vue@latest diff button
# or: npx shadcn-vue@latest diff button
shadcn-vue now uses Reka UI v2 (formerly Radix Vue) as its foundation. All new components use Reka UI primitives.
Migration: Existing projects should update to Reka UI v2. See official migration guide: shadcn-vue.com/docs/changelog#reka-ui
shadcn-vue uses components.json to configure:
@/components/ui)@/lib/utils)Full example: See templates/components.json or generate via bunx shadcn-vue@latest init
The @/lib/utils.ts file provides the cn() helper for merging Tailwind classes:
clsx + tailwind-merge for conflict resolutionAuto-generated by shadcn-vue init - no manual setup needed.
Templates (templates/):
quick-setup.ts - Complete setup guide for Vue/Nuxt with examples (190 lines)References (references/):
error-catalog.md - All 7 documented issues with solutions (267 lines)Load these references based on the task:
Load references/error-catalog.md when:
Load references/component-examples.md when:
Load references/dark-mode-setup.md when:
This skill composes well with:
References (references/):
component-examples.md - All 50+ component examples with codedark-mode-setup.md - Complete dark mode implementation guideerror-catalog.md - Common errors and solutionsTemplates (templates/):
Official Documentation:
Examples:
Production Tested: Vue/Nuxt applications, admin dashboards, content management systems Last Updated: 2025-12-09 Token Savings: ~65% (reduces setup + component documentation)
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.