shadcn-vue — Vue Port of shadcn/ui

Introduction

shadcn-vue brings the shadcn/ui philosophy to the Vue ecosystem. Instead of installing a traditional component library as a dependency, you copy components directly into your project, giving you full ownership of the code and the freedom to modify every detail.

What shadcn-vue Does

• Provides accessible, styled Vue components you copy into your own codebase
• Built on Reka UI (formerly Radix Vue) primitives for accessibility compliance
• Uses Tailwind CSS for styling with full theme customization via CSS variables
• Offers a CLI that scaffolds components, installs dependencies, and configures paths
• Supports Vue 3 with TypeScript and Composition API patterns

Architecture Overview

Each component is a self-contained Vue SFC that wraps a Reka UI primitive with Tailwind CSS classes. The CLI reads a components.json config to know where to place files and which CSS framework variant to use. Because components live in your source tree rather than in node_modules, you can edit markup, add props, or swap styling without forking a library.

Self-Hosting & Configuration

• Initialize with npx shadcn-vue@latest init to generate components.json
• Configure component paths, Tailwind config location, and alias imports in components.json
• Add individual components on demand via the CLI
• Customize the theme by editing CSS variables in your global stylesheet
• Works with Vite, Nuxt, and other Vue-compatible build tools

Key Features

• Full source ownership with no hidden dependency updates
• WAI-ARIA compliant through Reka UI primitives
• Dark mode support via CSS variable theming
• TypeScript types included for every component
• Growing catalog of 40+ components matching the React shadcn/ui set

Comparison with Similar Tools

• shadcn/ui (React) — the original; shadcn-vue mirrors its API for Vue
• Vuetify — full-featured installable library; shadcn-vue favors code ownership
• Nuxt UI — tightly integrated with Nuxt; shadcn-vue works with any Vue setup
• PrimeVue — large component count as an npm package; shadcn-vue copies code into your project
• Element Plus — opinionated design system; shadcn-vue is more minimal and customizable

FAQ

Q: Do I get updates when shadcn-vue releases new component versions? A: You re-run the CLI to pull updated templates, but existing components in your project are not overwritten unless you choose to.

Q: Does shadcn-vue work with Nuxt? A: Yes. The CLI detects Nuxt projects and adjusts paths and auto-imports accordingly.

Q: Can I use shadcn-vue without Tailwind CSS? A: Tailwind CSS is a core dependency for the default components. You would need to rewrite the styling layer to remove it.

Q: Is shadcn-vue production-ready? A: It is widely used in production Vue projects. Components are built on stable Reka UI primitives.

Sources

• https://github.com/unovue/shadcn-vue
• https://shadcn-vue.com