Skip to content

Component Libraries

Listed below are some of the most widely used component libraries for Vue 3.

Styled Vue components

These libraries all provide large collections of ready-to-use Vue components, complete with styling.

The monthly downloads should not be trusted as a way to judge the quality of a library. Specifically:

  • Some of these libraries are much older than others and will benefit from historical inertia.
  • Some used the same npm package name for the Vue 2 version of the library, while others did not. The final column of the table attempts to indicate whether the monthly downloads also include Vue 2.
NamedocsnpmVue 2?
Vuetify1docsnpm npm monthly downloadsTick Yes
Element Plusdocsnpm npm monthly downloadsnpm npm monthly downloads
PrimeVuedocsnpm npm monthly downloadsTick Yes
Quasardocsnpm npm monthly downloadsTick Yes
Ant Design Vuedocsnpm npm monthly downloadsTick Yes
Vant2docsnpm npm monthly downloadsTick Yes
Naive UIdocsnpm npm monthly downloadsCross No
bootstrap-vue-next3docsnpm npm monthly downloadsCross No
Vuestic UIdocsnpm npm monthly downloadsCross No
Flowbite Vue4docsnpm npm monthly downloadsCross No
Oruga UI5docsnpm npm monthly downloadsnpm npm monthly downloads

Notes:

  1. Vuetify 3 is compatible with Vue 3. Vuetify 3.0.0 was released at the end of October 2022 and is still missing some important features relative to earlier versions.
  2. Vant targets mobile browsers and isn't generally suitable for desktop applications.
  3. bootstrap-vue-next started out as bootstrap-vue-3, npm npm monthly downloads. It was an independent rewrite of BootstrapVue: docs, npm npm monthly downloads, which was a very popular Vue 2 component library. In late 2022, BootstrapVue announced work on Vue 3 compatibility, https://bootstrap-vue.org/vue3. In early 2023, bootstrap-vue-3 was renamed to bootstrap-vue-next.
  4. Flowbite Vue provides Vue components built using Flowbite. Flowbite itself is conceptually similar to Bootstrap or Buefy and is framework-agnostic.
  5. The Vue 2 library Buefy: docs, npm npm monthly downloads, combines Vue with Bulma. The lead maintainer of that project also maintains Oruga UI and recommends using Oruga as the successor to Buefy for Vue 3.

Unstyled Vue components

These libraries provide Vue components without styling. They can be used to build your own component library.

NamedocsnpmVue 2?
Headless UIdocsnpm npm monthly downloadsCross No
Radix Vuedocsnpm npm monthly downloadsCross No

There are also collections of example Vue components that use these two libraries:

CSS frameworks

The CSS frameworks listed here are not specifically tied to Vue.

daisyUI extends Tailwind CSS, adding utility classes for writing components.

Flowbite is conceptually similar to Bootstrap or Bulma, but built using Tailwind CSS.

Namedocsnpm
Tailwind CSSdocsnpm npm monthly downloads
Bootstrapdocsnpm npm monthly downloads
Bulmadocsnpm npm monthly downloads
daisyUIdocsnpm npm monthly downloads
Flowbitedocsnpm npm monthly downloads

All of these libraries can be used with Vue, but some of them include their own JavaScript code to add interactivity, which may clash with Vue. You'll likely need to implement that interactivity yourself instead, or use one of the Vue integrations listed earlier in Styled Vue components.