Top Vue Components Libraries

Filters

Top 5 Projects Compared

storybook
83,961

Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and more.

Code Example

import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button primary>Button</Button>;

Pros

Supports multiple frameworks (React, Vue, Angular, etc.), unlike many other projects that are framework-specific.
Provides a robust development environment for UI components with features like hot reloading and addons.
Facilitates better documentation and testing of UI components compared to most other listed projects.

Cons

Has a steeper learning curve compared to simpler UI libraries like Tailwind UI or Bootstrap Vue.
Requires more setup and configuration than some of the more opinionated UI frameworks like Vuetify or Element.
Can add complexity to smaller projects where a full-fledged component development environment might be overkill.

element
54,097

ElemeFE/element is a popular Vue.js 2.0 UI toolkit for building responsive web interfaces.

Code Example

<template>
  <el-button type="primary" @click="handleClick">Click me</el-button>
</template>

Pros

Comprehensive set of well-designed, customizable components compared to more focused libraries like vue-lazyload or vue-multiselect
Excellent documentation and active community support, surpassing many other Vue UI frameworks
Seamless integration with Vue.js, making it more appealing for Vue developers than generic UI libraries like Bootstrap

Cons

Larger bundle size compared to lightweight alternatives like Tailwind CSS or HeadlessUI
Less flexibility for custom designs compared to utility-first frameworks like Tailwind CSS
Limited support for Vue 3 compared to newer frameworks like Naive UI or PrimeVue

vuetify
39,633

Vuetify is a comprehensive Material Design component framework for Vue.js, offering a rich set of pre-built UI components and tools for building responsive web applications.

Code Example

<template>
  <v-app>
    <v-btn color="primary">Click me</v-btn>
  </v-app>
</template>

Pros

Extensive collection of pre-built Material Design components, reducing development time and ensuring consistency
Strong community support and regular updates, ensuring long-term viability and compatibility
Excellent documentation and examples, making it easy for developers to get started and find solutions

Cons

Larger bundle size compared to some lightweight alternatives like Tailwind UI or Headless UI
Less flexibility in customization compared to utility-first frameworks like Tailwind CSS
Steeper learning curve for developers not familiar with Material Design principles or Vue.js ecosystem

headlessui
25,670

Headless UI is a set of completely unstyled, fully accessible UI components for React and Vue.

Code Example

import { Menu } from '@headlessui/react'

<Menu>
  <Menu.Button>Options</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a className={`${active && 'bg-blue-500'}`} href="/account-settings">
          Account settings
        </a>
      )}
    </Menu.Item>
    {/* More items... */}
  </Menu.Items>
</Menu>

Pros

Provides fully accessible components out of the box, saving development time on accessibility implementation.
Offers complete styling flexibility, allowing developers to customize the look and feel to match their design system.
Lightweight and focused solely on functionality, resulting in smaller bundle sizes compared to full-featured UI libraries.

Cons

Requires more initial setup and styling work compared to pre-styled component libraries like Vuetify or Element.
Limited set of components compared to more comprehensive libraries like Ant Design Vue or Bootstrap Vue.
May have a steeper learning curve for developers accustomed to using pre-styled components.

iview
23,979

iView is a high-quality UI component library for Vue.js, offering a rich set of customizable and reusable components.

Code Example

<template>
  <Button type="primary" @click="showMessage">Click me!</Button>
</template>
<script>
export default {
  methods: {
    showMessage() {
      this.$Message.info('Hello, iView!');
    }
  }
}
</script>

Pros

Comprehensive set of components specifically designed for Vue.js applications
Well-documented with detailed API references and examples
Supports both desktop and mobile interfaces with responsive design

Cons

Less popular compared to some alternatives like Element UI or Vuetify
Limited community support and fewer third-party extensions
Not as frequently updated as some other UI libraries

All Top Projects

storybook

83,961

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

element

54,097

A Vue.js 2.0 UI Toolkit for Web

vuetify

39,633

🐉 Vue Component Framework

headlessui

25,670

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

iview

23,979

A high quality UI Toolkit built on Vue.js 2.0

vant

23,159

A lightweight, customizable Vue UI library for mobile web apps.

ant-design-vue

20,076

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Vue.Draggable

20,031

Vue drag-and-drop component based on Sortable.js

vux

17,592

Mobile UI Components based on Vue & WeUI

mdx

17,395

Markdown for the component era

naive-ui

15,880

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.

bootstrap-vue

14,500

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

vue-awesome-swiper

12,806

🏆 Swiper component for @vuejs

stencil

12,500

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

mitosis

12,263

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

vue-material

9,879

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.

primevue

9,803

Next Generation Vue UI Component Library

vue-echarts

9,609

Vue.js component for Apache ECharts™.

buefy

9,540

Lightweight UI components for Vue.js based on Bulma

OnsenUI

8,820

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

vue-lazyload

7,987

A Vue.js plugin for lazyload your Image or Component in your application.

intl-tel-input

7,567

A JavaScript plugin for entering and validating international telephone numbers. Now includes React and Vue components.

tsparticles

7,523

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

vue-quill-editor

7,375

@quilljs editor component for @vuejs(2)

vue-multiselect

6,665

Universal select/multiselect/tagging component for Vue.js

nutui

6,090

京东风格的移动端 Vue 组件库，支持多端小程序(A Vue.js UI Toolkit for Mobile Web)

vue-class-component

5,804

ES / TypeScript decorator for class-style Vue components.

vuesax

5,626

New Framework Components for Vue.js 2

videojs-player

5,237

@videojs player component for @vuejs(3) and React.

vue-loader

4,985

📦 Webpack loader for Vue.js components

Top Vue Components Libraries

Filters

Top 5 Projects Compared

storybook83,961

Code Example

Pros

Cons

element54,097

Code Example

Pros

Cons

vuetify39,633

Code Example

Pros

Cons

headlessui25,670

Code Example

Pros

Cons

iview23,979

Code Example

Pros

Cons

All Top Projects

storybook

element

vuetify

headlessui

iview

vant

ant-design-vue

Vue.Draggable

vux

mdx

naive-ui

bootstrap-vue

Visual CopilotPromo

vue-awesome-swiper

stencil

mitosis

vue-material

primevue

vue-echarts

buefy

OnsenUI

vue-lazyload

intl-tel-input

tsparticles

vue-quill-editor

vue-multiselect

nutui

vue-class-component

vuesax

videojs-player

vue-loader

storybook
83,961

element
54,097

vuetify
39,633

headlessui
25,670

iview
23,979

Visual Copilot
Promo