VueAdmin dashboard

shards-dashboard-vue — Vue Admin dashboard Template

By DesignRevision

Shards Dashboard Vue is a free Vue admin dashboard template published by DesignRevision under the MIT license, featuring a modern design system and multiple custom pages and components.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

Free Vue admin dashboard template under the MIT license, allowing modification, commercial use, and distribution

Provides multiple custom page templates and components covering common admin interfaces

Based on the Shards Vue design system, with dependencies such as Chart.js, Quill, and NoUiSlider

Template pages are concentrated in src/views, mostly self-contained, making them easy to use as needed

Component styles are mostly isolated in single-file components, with global styles in src/assets/scss

The official product page offers a Sketch design file download

Template Details

Shards Dashboard Vue is a Vue-based admin dashboard template pack maintained by DesignRevision. The repository is under the MIT license, allowing free use, modification, commercial use, and distribution of this version of the code. The template is built on a modern design system and provides multiple custom templates and components, making it a suitable starting point for admin interfaces.

In terms of project structure, all template pages are located in src/views, and most pages are self-contained; src/layouts defines only a Default layout, but the structure is easy to extend for UI kits; src/components organizes template-specific subcomponents by subdirectory; most component styles are isolated within single-file components, while some global styles are placed in src/assets/scss alongside the Shards Dashboard Lite base styles; src/utils contains common Chart.js utility functions.

Regarding dependencies, the template is based on Shards Vue and uses Chart.js, Vue Datepicker, NoUiSlider, Quill, Material Icons, and FontAwesome Icons. The official product page also offers a Sketch file download. The repository also promotes the paid Shards Dashboard Pro Vue version; this listing includes only the public free code and does not include paid upgrade content.

VueAdmin

Is it right for your project?

Use Cases

Building the page skeleton and navigation layout for an admin system
Referencing ready-made page templates such as dashboards, tables, and forms
Reusing its components and Shards Vue design styles in a Vue project
Using it as an example project to learn how to organize a Vue admin interface

Suitable For

Front-end developers who need a Vue admin template to get started
Projects that want to build upon MIT-licensed code
Teams that need ready-made dashboard pages and component references

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Run yarn to install dependencies
2
Run yarn serve to start the local development server
3
Template pages are in src/views, and layouts are in src/layouts
4
Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses
5
The paid Pro version and external services are not included in the free code covered here

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope applies to this version of the code and does not imply that external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version of the code are permitted.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

The README promotes the paid Shards Dashboard Pro Vue version, which offers more templates and components; the free version does not include these Pro contents, which require a separate paid purchase.
The Sketch design file must be downloaded from the official product page; it is a separately provided asset and is not within the scope of the free code in this repository.
The project materials mention optional paid versions or features; this listing includes only the public free code and does not include paid upgrades.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the MIT license of the code.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

check out [Shards Dashboard Pro Vue](https://designrevision.com/downloads/shards-dashboard-pro-vue/) which features many more custom templates and components
Original README

You can download the Sketch files from the official product page.
Original README

https://github.com/DesignRevision/shards-dashboard-vue/blob/master/LICENSE https://github.com/DesignRevision/shards-dashboard-vue/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 76 / 100
Technologies: Vue
Website type: Admin dashboard

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2022-02-10
Screenshot last checked: 2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 9131851b8b9e7c7983dbda5db58d3d511aca9d3abc8fd01537806b92ba49dc04

2026-10-02T15:46:05.146Z

Source file / repository

<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).

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

vuestic-admin

Vuestic Admin is an open-source Vue 3 admin template maintained by Epicmax, built on Vuestic UI with Vite, Pinia, and Tailwind CSS. It provides a ready-to-run dashboard with a dark theme, global configuration, i18n internationalization, and responsive layout.

Vue · Admin dashboard

v3-admin-vite

v3-admin-vite is an AI-friendly Vue3 admin template built on Vue3, Vite, TypeScript, and Element Plus. It keeps a lean structure with detailed comments, supports backend-controlled dynamic route permissions, page-level and button-level permissions, multiple themes and layouts, and mobile compatibility.

Vue · Admin dashboard

vue-typescript-admin-template

A Vue 2.6 + TypeScript + Element UI admin template ported from vue-element-admin, offering type safety and enterprise features like permission authentication, internationalization, dynamic themes, editors, charts, Excel/PDF handling, and PWA support.

Vue · Admin dashboard

vue-antd-admin

Vue Antd Admin is the Vue implementation of Ant Design Pro, providing an out-of-the-box front-end and design solution for admin dashboards.

Vue · Admin dashboard

coreui-free-vue-admin-template

CoreUI's official free Vue admin template, MIT licensed, built on Vue 3 and the CoreUI component library with Vue Router, Pinia, and Vite.

Vue · Admin dashboard

nova-admin

Nova Admin is an admin template built on Vue3, Vite, TypeScript, and Naive UI, with Unocss for styling.

Vue · Admin dashboard