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.
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/shadcn-vue
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
📊 Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
📦 Ships with claude-skills
</> SKILL.md
shadcn-vue.SKILL.md
---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
- 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
**Error**: Theme colors not applying, gray/transparent components
**Solution**: Ensure all CSS variables are defined (run `init` command)
---
### Issue #4: Wrong Style Selected
**Error**: Components look different than expected
**Solution**: Choose carefully during `init` (New York or Default) - cannot change later without reinstall
---
### Issue #5: Mixing Radix Vue and Reka UI
**Error**: Type conflicts, duplicate components
**Solution**:
- Use `bunx shadcn-vue@latest` for Reka UI v2
- Use `bunx shadcn-vue@radix` for legacy Radix Vue
- Don't mix both
---
### Issue #6: Monorepo Path Issues
**Error**: Components installed in wrong directory
**Solution**: Use `-c` flag to specify workspace:
```bash
bunx shadcn-vue@latest init -c ./apps/web
bunx shadcn-vue@latest add button -c ./apps/web
```
---
### Issue #7: Component Import Fails After Manual Edit
**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`
---
## CLI Commands Reference
### init Command
```bash
# 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 Command
```bash
# 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
```
### diff Command
```bash
# Check for component updates
bunx shadcn-vue@latest diff button
# or: npx shadcn-vue@latest diff button
```
---
## Reka UI v2 Migration
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](https://shadcn-vue.com/docs/changelog#reka-ui)
---
## Configuration
shadcn-vue uses `components.json` to configure:
- Component paths (`@/components/ui`)
- Utils location (`@/lib/utils`)
- Tailwind config paths
- TypeScript paths
**Full example:** See `templates/components.json` or generate via `bunx shadcn-vue@latest init`
---
## Utils Library
The `@/lib/utils.ts` file provides the `cn()` helper for merging Tailwind classes:
- Combines multiple className strings
- Uses `clsx` + `tailwind-merge` for conflict resolution
**Auto-generated** by `shadcn-vue init` - no manual setup needed.
---
## Bundled Resources
**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)
---
## When to Load References
Load these references based on the task:
1. **Load `references/error-catalog.md` when:**
- User encounters "component not found" or import errors
- Setup commands fail or configuration issues arise
- Tailwind CSS variables or TypeScript paths broken
- **tailwind-v4-shadcn** → Tailwind v4 with React shadcn/ui
- **react-hook-form-zod** → Form validation patterns (similar to Auto Form)
- **tanstack-query** → Data fetching for tables
- **zustand-state-management** → State management
---
## Resources
**References** (`references/`):
- `component-examples.md` - All 50+ component examples with code
- `dark-mode-setup.md` - Complete dark mode implementation guide
- `error-catalog.md` - Common errors and solutions
**Templates** (`templates/`):
- Component templates available in references/component-examples.md
---
## Secure Installation
When installing packages during setup, follow supply chain security best practices:
- **Block post-install scripts** — `npm config set ignore-scripts true` (or Bun: disabled by default)
- **Cooldown period** — Wait 7 days for new package versions to be vetted by the community
- **Audit before installing** — Run `socket package score npm <pkg>` or use `socket npm install <pkg>` to check packages
Load the `dependency-upgrade` skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
