shadcn-vue

Name: shadcn-vue
Availability: InStock
Author: discountedcookie

Build shadcn-vue UI components with Reka UI and Tailwind CSS.

Updated Oct 26, 2025

Search Tags:#frontend #component library #Tailwind #UI components #Reka UI #shadcn-vue

Ready to run

npx skills add https://github.com/discountedcookie/10x-mapmaster --skill shadcn-vue

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn-vue
Source: https://github.com/discountedcookie/10x-mapmaster/tree/main/.opencode/skills/shadcn-vue
Command: npx skills add https://github.com/discountedcookie/10x-mapmaster --skill shadcn-vue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides context and references for building UI with shadcn-vue components, helping you create consistent, scalable UI patterns.

Core Features & Use Cases

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]

Quick Start

Run: npx shadcn-vue@latest add [component] to scaffold a new UI component.

Frequently Asked Questions about shadcn-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build UI components with shadcn-vue in a Vue project?▼

shadcn-vue provides pre-built UI components built on Reka UI primitives and styled with Tailwind CSS. Use `npx shadcn-vue@latest add [component]` to scaffold components into src/components/ui, then import and compose them in your Vue templates for consistent, production-ready UI.

Can I use shadcn-vue components with form validation?▼

Yes. shadcn-vue integrates with VeeValidate and zod for form validation. Combine shadcn-vue form components with VeeValidate's validation composables and zod schemas to handle client-side validation consistently across your forms.

What's the difference between shadcn-vue and the React version of shadcn?▼

shadcn-vue uses Reka UI primitives instead of Radix UI, and is built for Vue 3 with Tailwind CSS styling. The component API and patterns differ to align with Vue's composition model and reactivity system.

How do I ensure UI components stay consistent across my project?▼

shadcn-vue enforces consistency by centralizing components in src/components/ui and providing standardized patterns for common UI needs like Toast with Sonner and Dialog/Sheet. Reference existing components when adding new ones to maintain design coherence.

Does shadcn-vue work with existing Tailwind CSS configurations?▼

Yes. shadcn-vue relies on Tailwind CSS for styling, so it integrates with your existing Tailwind setup. Components use Tailwind utility classes and can be customized by modifying class names or extending your Tailwind configuration.

What UI component categories does shadcn-vue cover?▼

shadcn-vue provides components across Form, Layout, Overlay, Feedback, and Display categories. Use the CLI to add specific components from these categories as needed, and scaffold new ones following established patterns in your project.