Vuecidity Component Library for Vue.JS

Vuecidity UI Library for Vuejs

Vuecidity is a Component Library inspired by Material Design and Bootstrap with principles of modern UI design powered by Vue. It is a free, open source project and licensed under MIT.


Vuecidity provides a set of 32 desktop and mobile UI components, along with a 24-column responsive layout grid system as well as:

  • styles and colors
  • beautifully crafted form elements
  • special Vue directives
  • SSR
  • ability to build responsive websites
  • PWAs (through Electron)
  • mobile apps (through Cordova)
  • gzipped files 18.5KB JavaScript and 13.3KB CSS

It is possible to build different versions using the same codebase written in ES6.

Quick Start

The library is available for installation via npm and adding it to your project is quick and easy. To add Vuecidity to your project you should pull it to yournode_modules via NPM or Yarn and import the styles for VcIcon and VcFlag as described below. jsDelivr and UnPkg CDN support is also available as described below.

Once you are done installing into your node_modules, you need to include Vuecidity into your main entry file (typically /src/main.js):

// src/main.js
import Vue from 'vue'
import Vuecidity from 'vuecidity'
import '../node_modules/vuecidity/dist/lib/vuecidity.min.css'


NPM installation

$ npm install vuecidity --save
Yarn installation
$ yarn add vuecidity

You can find @vuecidity on Twitter.