Guide · Open source
How to use shadcn-vue: clone, customize and build your components
Updated · written with AI from the project's own documentation and checked against our catalogue data
shadcn-vue is a set of UI components for Vue, ported from the shadcn-ui project. Its README presents them as a starting point: you copy the code, change it and build on it rather than installing a finished visual theme. This guide shows you how to get the source, where to find documentation and how to decide whether it fits your project.
shadcn-vueunovue/shadcn-vue · ★ 10.8k · MIT Install options & downloads Quick start
- 1Clone the repository. Run git clone https://github.com/unovue/shadcn-vue to download the source code to your machine.
- 2Open the documentation. Visit http://shadcn-vue.com/docs to read how the components are set up and used.
- 3Pick the components you need. Decide which components your project needs as a base for your own UI.
- 4Customize the code. Edit the components directly to match your design and behaviour, since the README frames them as a starting point.
- 5Build your own library. Extend the customised components into a component library your team can reuse.
What shadcn-vue is and who it is for
shadcn-vue is a Vue port of shadcn-ui. The README describes it as a set of beautifully designed components that you can customize, extend, and build on. The project is open source, and the README encourages you to use the code as a starting point for your own component library.
It suits Vue developers who want UI components they can edit directly, teams building an internal component library, and projects that want accessible, customizable components as a base. It is not a good fit if you want a finished visual theme with no code changes, if you are not a developer, or if your project uses a framework other than Vue.
Get the source code
The README's install instruction is to clone the repository. The source does not list any prerequisites, so check the project's documentation for the exact setup steps for your environment.
git clone https://github.com/unovue/shadcn-vueRead the documentation
The full documentation is on the project's documentation site. The README links to it at http://shadcn-vue.com/docs, and the project homepage is https://shadcn-vue.com. Use the docs as the reference for how the components are meant to be used and changed.
Customize and extend the components
Because the components are code you own, you change them where they live rather than overriding a closed package. The README stresses that the goal is to make the components your own and to use them to build your own component library.
Keep your changes organised so that later updates from the upstream project are easier to review. Document what you changed, especially if other people on your team will build on the components.
- Edit a component directly when you need a different look or behaviour.
- Extend a component to add the features your product needs.
- Group your customised components into an internal library for your team.
Contribute or get help
To contribute, read the contributing guide in the repository at CONTRIBUTING.md. The project is funded by sponsors; if your company builds on shadcn-vue, the README asks you to consider sponsoring through Open Collective or GitHub Sponsors.
What people use it for
- Starting a Vue app with accessible, editable UI components instead of building every button and dialog from scratch.
- Creating an internal component library that a company's Vue projects share.
- Adapting a base component set to a custom visual design by changing the code directly.
Frequently asked questions
Is shadcn-vue free to use?
Yes. The project is licensed under the MIT license, as stated in the README and the LICENSE file. The README also says it is free and open source, and it asks companies that build on it to consider sponsoring.
What are the requirements for shadcn-vue?
The source does not list any prerequisites. It is a Vue component set, so you will need a Vue project to use it, and the documentation at shadcn-vue.com/docs is the place to confirm the setup details.
How do I install shadcn-vue?
The README's install instruction is to clone the repository with git clone https://github.com/unovue/shadcn-vue. The install method is not described in more detail in the source, so follow the documentation for setup.
Is shadcn-vue the same as shadcn-ui?
No. shadcn-vue is a Vue port of the shadcn-ui project. If you use React, shadcn-ui is the relevant project; shadcn-vue is for Vue.
What are the alternatives to shadcn-vue?
Comparable projects include shadcn-ui, Radix Vue, Naive UI and PrimeVue. Pick based on whether you want editable source code (shadcn-vue) or a ready-made component library you install as a package.
Can I use shadcn-vue if I want a ready-made theme?
Probably not. The README frames shadcn-vue as a starting point to customize, so it is not designed for people who want a finished visual theme with no code changes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
shadcn-vue is a good choice for Vue developers and teams who want accessible components they can edit and build on as their own code. If you want a finished theme with no code changes, or you do not work in Vue, choose a different option such as a packaged component library.
Install options & downloads