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

Documentation & Demo • Official Page

Getting Started

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 pnpm, Yarn or npm.

• Official Website
• Release Package

Quick Start

You can install Shards Vue via pnpm, Yarn or npm.

// Install via pnpm
pnpm add @gorse/shards-vue

// Install via Yarn
yarn add @gorse/shards-vue

// Install via npm
npm i @gorse/shards-vue

Module Bundlers

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

import { createApp } from 'vue'
import ShardsVue from '@gorse/shards-vue'
import App from './App.vue'

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

createApp(App).use(ShardsVue).mount('#app')

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 { createApp } from 'vue'
import App from './App.vue'

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

import { Button } from '@gorse/shards-vue/src/components'

createApp(App).use(Button).mount('#app')

Importing Single File Components

Importing single file components is also possible.

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

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

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

File Sizes

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

File Name	Size (min.gz)
shards-vue.common.min.js	47.97KB
shards-vue.esm.min.js	48.05KB
shards-vue.umd.min.js	43.16KB

Built Using

• Shards UI Kit
• noUiSlider by Léon Gersen (WTFPL License)
• Vue Datepicker

Contributing

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 pnpm install to install all required dependencies.
3. Run pnpm watch in order to kickstart the server and run the sandbox with hot reloading.
4. Refer to the sandbox/Sandbox.vue file for more details.

Roadmap

View the roadmap.

Changelog

View notable changes.