Best Vue 3 component libraries for Design Systems

The component libraries on this list are accessible and can be styled to match your brand and your design tokens.

Accessibility mandatory
Customisable style

Composition primitives

These libraries are the lowest level you can get. It's lower than unstyled components. You compose primitive to build the component you need. The best example in Vue is Zag(beta) that provides composable primitives and state machines to create accessible components.

  • Zag (beta)

    Screenshot of Zag (beta)

    A collection of framework-agnostic UI component patterns that can be used to build design systems for React, Vue and Solid.js


    • 20+ components

Unstyled components

These component libraries bring unstyled components. You bring your own tokens structure and apply your styling on top of the pre-build components.

  • Headless UI

    Screenshot of Headless UI

    Headless UI is made by the team at Tailwind Labs. It's a set of unstyled components ready to be styled. Intended to be used with Tailwindcss, it can also be used by any CSS utility solution. (Also available for React)


    • ~10 components

Fully styled components

These component libraries are fully styled components ready-to-use. Most of them have a sophisticated theming systems with more or less design token granularity. Get the library you like, tune the styling through their theming system and go.

  • Vuetify 3

    Screenshot of Vuetify 3

    Vuetify implements Google's Material Design.


    • 16+ components
  • Vuestic UI

    Screenshot of Vuestic UI

    Vuestic UI is a fully customizable component library.


    • 50+ components
  • Naive UI

    Screenshot of Naive UI

    Naive UI is a themable component library writen in TypeScript.


    • 70+ components
  • PrimeVue

    Screenshot of PrimeVue

    PrimeVue is an extensive library with 90+ components.


    • 90+ components
  • Vanilla Components

    Screenshot of Vanilla Components

    Vanilla Components is a lightweight, flexible & customizable UI library for Vue 3, styled with Tailwind CSS.


    • 20+ components
  • Element Plus

    Screenshot of Element Plus

    Element Plus is a large Vue 3 component library.


    • 40+ components
  • Vue DevUI

    Screenshot of Vue DevUI

    Vue DevUI is a relatively large component library based on DevUI Design. Includes 7 themes out of the box.


    • 55 components
  • Inkline

    Screenshot of Inkline

    Inkline is a developer-friendly foundation for building accessible components. It includes design tokens and utility classes.


    • 20+ components

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.

Try for free