shadcn-vue

discountedcookie's avatarfrom discountedcookie

Context and reference for building UI with shadcn-vue components. Load when adding, modifying, or debugging UI components.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 15, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides a specialized context and reference guide for building high-quality user interfaces with shadcn-vue. It streamlines the development workflow by offering instant access to component patterns, Reka UI primitives, and Tailwind CSS configurations, helping developers add, modify, or debug UI elements with precision and speed while ensuring best practices in Vue.js development.

Use Cases

  • Rapidly scaffolding new UI components using the shadcn-vue CLI and project-specific design patterns.
  • Debugging and refactoring existing Vue components to ensure compliance with Reka UI primitives and Tailwind CSS utility classes.
  • Implementing complex, schema-validated forms by seamlessly integrating VeeValidate and Zod within the shadcn-vue ecosystem.
  • Maintaining design system consistency by referencing established UI patterns and avoiding redundant custom styling.
nameshadcn-vue
description>-

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/