shadcn-vue

name	shadcn-vue
description	>- Use when this capability is needed.

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-vue directly - use Reka UI via shadcn-vue
• Create custom styles when a variant exists
• Skip checking if component already exists in src/components/ui/

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.