Shards Vue is a free, beautiful and modern Vue.js UI kit
based on Shards.

Documentation & Demo • Official Page

Getting started with Shards Vue is fairly simple. You can download Shards Vue via the official website, here on GitHub as a release package or by using a package manager such as Yarn or NPM.

• Official Website
• Release Package

You can install Shards Vue via Yarn or NPM.

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

If you are using a module bundler such as Webpack or Rollup, you can include the entire Shards Vue library inside your project.

import Vue from 'vue'
import ShardsVue from 'shards-vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

Vue.use(ShardsVue);

If you'd like to register only certain components as Vue plugins, make sure to import just the component you'd like to use.

import Vue from 'vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

import { Button } from 'shards-vue/src/components'
Vue.use(Button)

Importing single file components is also possible.

<template>
    <d-button @click="handleClick">Click Me!</d-button>
</template>

<script>
import dButton from 'shards-vue/src/components/button/Button'

export default {
    components: {
        dButton
    },
    methods: {
        handleClick() {
            alert('You just clicked me!')
        }
    }
}
</script>

You can also run yarn bundlesize at any time to check the compiled file sizes.

• Shards UI Kit
• noUiSlider by Léon Gersen (WTFPL License)
• vuejs-datepicker

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

If you'd like to fix a bug or work on a feature, make sure to follow the steps below in order to setup the development environment on your local machine:

1. Clone the repository.
2. Run yarn to install all required dependencies.
3. Install Vue CLI and the CLI service globally by running: npm i -g @vue/cli @vue/cli-service-global or yarn global add @vue/cli-service-global.
4. Run yarn watch in order to kickstart the server and run the sandbox with hot reloading.
5. Refer to the sandbox/Sandbox.vue file for more details.

View the roadmap.

View notable changes.