# shadcn-vue — Vue Port of shadcn/ui

> A Vue adaptation of the popular shadcn/ui component collection, providing copy-paste accessible components built on Radix Vue and Tailwind CSS.

## Install

Save in your project root:

# shadcn-vue — Vue Port of shadcn/ui

## Quick Use
```bash
npx shadcn-vue@latest init
npx shadcn-vue@latest add button
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-b0556076
Author: AI Open Source