From shadcn-vue
Sets up production-ready shadcn-vue UI components in Vue/Nuxt apps with Tailwind CSS and Reka UI. Use for accessible forms, data tables, charts, dark mode, and component imports.
npx claudepluginhub secondsky/claude-skills --plugin shadcn-vueThis skill uses the workspace's default tool permissions.
**Production-tested**: Vue/Nuxt applications with accessible, customizable components
Conducts multi-round deep research on GitHub repos via API and web searches, generating markdown reports with executive summaries, timelines, metrics, and Mermaid diagrams.
Dynamically discovers and combines enabled skills into cohesive, unexpected delightful experiences like interactive HTML or themed artifacts. Activates on 'surprise me', inspiration, or boredom cues.
Generates images from structured JSON prompts via Python script execution. Supports reference images and aspect ratios for characters, scenes, products, visuals.
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+
# 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)