Shards Vue


    Getting Started

    Shards Vue is really easy to get started with. Make sure to follow the guide below to get a better understanding about some of the decisions behind Shards Vue and how to use it to kick-start your next project.

    Note: This page is currently a work in progress.


    If you are using a module bundler such as Webpack or Rollup, you can install Shards Vue via Yarn or NPM and import Shards Vue directly into your project.

    // Install via Yarn
    yarn add shards-vue
    // Install via NPM
    npm i shards-vue

    Module Bundlers

    You can register the entire UI kit as a Vue plugin in your app's entry point:

    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'

    Registering Components as Vue Plugins

    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'

    Importing Single File Components

    Importing single file components is also possible.

        <d-button @click="handleClick">Click Me!</d-button>
    import dButton from 'shards-vue/src/components/button/Button'
    export default {
        components: {
        methods: {
            handleClick() {
                alert('You just clicked me!')

    Naming Decisions

    You will notice that all components are prefixed with <d-{name}>. The reason behind this decision is to provide a consistent naming experience across all existing and future products from DesignRevision.