Freddy-CHEN-ux shadcn-vue
Context skill for working with shadcn-vue components.
Announce: "I'm loading shadcn-vue context for component work."
Key Facts
- Built on Reka UI primitives (not Radix like React version)
- Uses Tailwind CSS for styling
- Forms integrate with VeeValidate + zod
- CLI:
npx shadcn-vue@latest add [component]
When Stuck
Fetch docs with webfetch for the component you need:
| Category | Components | Base URL |
|---|---|---|
| Form | form, button, input, select, checkbox, switch | https://www.shadcn-vue.com/docs/components/[name] |
| Layout | sidebar, tabs, accordion, navigation-menu | same pattern |
| Overlay | dialog, sheet, popover, tooltip, dropdown-menu | same pattern |
| Feedback | alert, sonner (toast), progress, badge, skeleton | same pattern |
| Display | card, table, avatar | same pattern |
Full LLM reference: https://www.shadcn-vue.com/llms.txt
Component Patterns in This Project
Check existing components in src/components/ui/ before adding new ones.
Common patterns used:
- Toast notifications via Sonner
- Forms with VeeValidate + zod schemas
- Dialog for modals, Sheet for slide-overs
Do NOT
- Import from
@radix-vuedirectly - use Reka UI via shadcn-vue - Create custom styles when a variant exists
- Skip checking if component already exists in
src/components/ui/