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 Yarn or NPM. * [Official Website](https://designrevision.com/download/shards-vue) * [Release Package](https://github.com/DesignRevision/shards-vue/releases)
### Quick Start You can install Shards Vue via Yarn or NPM. ```bash // Install via Yarn yarn add shards-vue // Install via NPM npm i shards-vue ```
### Module Bundlers If you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/), you can include the entire Shards Vue library inside your project. ```javascript 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); ```
### 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. ```javascript 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 Importing single file components is also possible. ```vue ```
### File Sizes You can also run `yarn bundlesize` at any time to check the compiled file sizes. | File Name | Size (min.gz) | |--------------------------|---------------| | shards-vue.common.min.js | 46.29KB | | shards-vue.esm.min.js | 46.24KB | | shards-vue.umd.min.js | 39.3KB |
### Built Using * [Shards UI Kit](https://designrevision.com/downloads/shards/) * [noUiSlider by Léon Gersen (WTFPL License)](https://refreshless.com/nouislider/download/) * [vuejs-datepicker](https://github.com/charliekassel/vuejs-datepicker)
### Contributing Please read [CONTRIBUTING.md](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.
### Roadmap [View the roadmap.](http://designrevision.com/docs/shards-vue/roadmap)
### Changelog [View notable changes.](CHANGELOG.md)

shards-vue

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past