Skip to content
Roman's notes

shadcn-vue

shadcn-vue is a Vue port of shadcn/ui. Instead of installing a package, you copy components directly into your project and own the code — no runtime dependency, full control.

Key features

Section titled “Key features”
  • Built on Radix Vue for accessible, unstyled primitives
  • Styled with Tailwind CSS — every component is a .vue file you can edit
  • Works with Vue 3 and Nuxt 3
  • CLI for adding components: npx shadcn-vue@latest add button

Quickstart

Section titled “Quickstart”
Terminal window
npx shadcn-vue@latest init

The init wizard sets up components.json, installs Tailwind and Radix Vue dependencies, and creates the components/ui directory.

Add individual components as needed:

Terminal window
npx shadcn-vue@latest add button dialog table

When to use

Section titled “When to use”
  • You want full ownership of UI code with no opaque library updates
  • You prefer Tailwind CSS for styling
  • You need accessible components without building from scratch

Sources

Section titled “Sources”