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.
1---2name: discountedcookie-10x-mapmaster-shadcn-vue3description: shadcn-vue4---56# shadcn-vue78Context skill for working with shadcn-vue components.910> **Announce:** "I'm loading shadcn-vue context for component work."1112## Key Facts1314- Built on **Reka UI** primitives (not Radix like React version)15- Uses **Tailwind CSS** for styling16- Forms integrate with **VeeValidate** + **zod**17- CLI: `npx shadcn-vue@latest add [component]`1819## When Stuck2021Fetch docs with `webfetch` for the component you need:2223| Category | Components | Base URL |24|----------|------------|----------|25| **Form** | form, button, input, select, checkbox, switch | `https://www.shadcn-vue.com/docs/components/[name]` |26| **Layout** | sidebar, tabs, accordion, navigation-menu | same pattern |27| **Overlay** | dialog, sheet, popover, tooltip, dropdown-menu | same pattern |28| **Feedback** | alert, sonner (toast), progress, badge, skeleton | same pattern |29| **Display** | card, table, avatar | same pattern |3031**Full LLM reference:** `https://www.shadcn-vue.com/llms.txt`3233## Component Patterns in This Project3435Check existing components in `src/components/ui/` before adding new ones.3637Common patterns used:38- Toast notifications via Sonner39- Forms with VeeValidate + zod schemas40- Dialog for modals, Sheet for slide-overs4142## Do NOT4344- Import from `@radix-vue` directly - use Reka UI via shadcn-vue45- Create custom styles when a variant exists46- Skip checking if component already exists in `src/components/ui/`4748---49> Converted and distributed by [TomeVault](https://tomevault.io/claim/discountedcookie) — claim your Tome and manage your conversions.50<!-- tomevault:4.0:skill_md:2026-04-15 -->
tomevault-io