shadcn-vue

shadcn-vue is the Vue port of shadcn/ui: a code distribution platform rather than a dependency. The CLI copies component source into your project, built with Vue 3, TypeScript, Tailwind CSS v4 and Reka UI primitives.

At a glance

Install	npx shadcn-vue@latest init
Package	none, source is copied in
Primitives	Reka UI
Styling	Tailwind CSS v4
Frameworks	Vite, Nuxt, Astro, Laravel
MCP server	yes, registry-aware
License	MIT

Install

npx shadcn-vue@latest init
npx shadcn-vue@latest add button dialog

What the code looks like

The import points at your own file tree, not at node_modules.

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button variant="outline" size="sm">Edit profile</Button>
    </DialogTrigger>
    <DialogContent>...</DialogContent>
  </Dialog>
</template>

Why it matters beyond Vue

Because the React original and this port share component names, file structure and CSS variables, a design language can move between the two ecosystems with far less translation than usual. Teams running React and Vue side by side get one visual system instead of two.

Choose it if

• You want to own and edit component source rather than configure a library.
• Your organisation already uses shadcn/ui in React and you want parity in Vue.

Look elsewhere if

• You want automatic upgrades. As in the React original, there is no package to bump.
• You are on Nuxt and want batteries included. Nuxt UI covers more ground with less setup.