<p align="center">
<a href="https://designrevision.com/downloads/shards-dashboard-lite-vue/">
<img src="assets/preview.png" width="250" />
</a>
</p>

<h1 align="center" style="border-bottom: none !important; margin-bottom: 5px !important;"><a href="https://designrevision.com/downloads/shards-dashboard-lite-vue/">Shards Dashboard Vue</a></h1>
<p align="center">
  <a href="#">
    <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" />
  </a>
  <a href="https://twitter.com/designrevision">
    <img src="https://img.shields.io/twitter/follow/DesignRevision.svg?style=social&label=Follow" />
  </a>
</p>

<p align="center">
A free Vue admin dashboard template pack featuring a modern design system <br />  and lots of custom templates and components.
</p>

<p align="center">
  <a href="https://designrevision.com/demo/shards-dashboard-lite-vue">
    <img height="55px" src="assets/btn-live-preview.png" />
  </a>
  <a href="https://designrevision.com/downloads/shards-dashboard-lite-vue">
    <img height="55px" src="assets/btn-learn-more.png" />
  </a>
</p>

<br />

<p align="center">
<a href="https://designrevision.com/downloads/shards-dashboard-lite-vue">
<img src="assets/demo-preview.gif" width="650" />
</a>
</p>

<br />

> ✨ **Note:** You can download the Sketch files from the official product page.

<br />

### Quick Start

* Install dependencies by running `yarn`.
* Run `yarn serve` to start the local development server.
* 😎 **That's it!** You're ready to start building awesome dashboards.

<br />

### Project Structure

* All templates are located inside `src/views` and most of them are self-contained.
* There's only one single layout defined (Default) inside `src/layouts`, however the current structure provides an easy way of extending the UI kit.
* The `src/components` directory hosts all template-specific subcomponents in their own subdirectory.
* Almost all components have their styles isolated in SFC, however, some global styles are also placed inside `src/assets/scss` next to Shards Dashboard Lite's base styles.
* The `src/utils` directory contains generic Chart.js utilities.

<br />

### 🌟 Pro Version

If you're looking for something more, check out [Shards Dashboard Pro Vue](https://designrevision.com/downloads/shards-dashboard-pro-vue/) which features many more custom templates and components. Use the `GITHUB15` coupon code for a **15% discount off the current price**.

<br />

### Built using

* [Shards Vue](https://designrevision.com/downloads/shards-vue)
* [Chart.js](http://www.chartjs.org/)
* [Vue Datepicker](https://github.com/charliekassel/vuejs-datepicker)
* [NoUiSlider](https://refreshless.com/nouislider/)
* [Quill](https://quilljs.com/)
* [Material Icons](http://material.io/icons)
* [FontAwesome Icons](http://fontawesome.io)

<br />

### Changelog

Please check out the [CHANGELOG](CHANGELOG.md).
