Volt Dashboard#
Volt Dashboard is a premium Bootstrap 5 admin dashboard created by Themesberg. It features a modern design system with carefully crafted components, extensive customization options, and a robust technical foundation. The dashboard is particularly notable for its clean interface, dark mode support, and extensive data visualization capabilities.
👉 Volt Dashboard - Product page
👉 Volt Dashboard - Live Demo
👉 New to App-Generator? SignIN with GitHub or Download a PRO Starter for only $19.99/mo
Project Structure#
volt-dashboard/
├── dist/ # Production files
├── src/
│ ├── assets/
│ │ ├── css/
│ │ │ ├── volt.css
│ │ │ └── vendor/
│ │ ├── js/
│ │ │ ├── volt.js
│ │ │ └── modules/
│ │ ├── img/
│ │ │ ├── brand/
│ │ │ ├── icons/
│ │ │ └── illustrations/
│ │ └── scss/
│ │ ├── volt/
│ │ │ ├── components/
│ │ │ ├── layout/
│ │ │ ├── mixins/
│ │ │ └── vendor/
│ │ └── volt.scss
│ ├── pages/
│ └── partials/
├── node_modules/
├── package.json
└── gulpfile.js
Component System#
Advanced Cards with Stats#
<div class="card border-light shadow-sm">
<div class="card-body">
<div class="row d-block d-xl-flex align-items-center">
<div class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
<div class="icon-shape icon-shape-primary rounded me-4 me-sm-0">
<i class="fas fa-chart-line"></i>
</div>
<div class="d-sm-none">
<h2 class="h5">Customers</h2>
<h3 class="mb-1">345,678</h3>
</div>
</div>
<div class="col-12 col-xl-7 px-xl-0">
<div class="d-none d-sm-block">
<h2 class="h5">Customers</h2>
<h3 class="mb-1">345,678</h3>
</div>
<small class="d-flex align-items-center">
<span class="text-success me-2">
<i class="fas fa-arrow-up"></i> 18.2%
</span>
<span class="text-gray-500">Since last month</span>
</small>
</div>
</div>
</div>
</div>
Data Tables#
<div class="card border-light shadow-sm mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-centered table-nowrap mb-0 rounded">
<thead class="thead-light">
<tr>
<th class="border-0">#</th>
<th class="border-0">Traffic Source</th>
<th class="border-0">Source Type</th>
<th class="border-0">Value</th>
</tr>
</thead>
<tbody>
<!-- Table rows -->
</tbody>
</table>
</div>
</div>
</div>
Resources#
Documentation: Available in Themesberg documentation
Support: Through Themesberg support system
Updates: Regular through npm
Community: Themesberg forums
Remember to keep your Volt Dashboard installation updated for the latest features and security patches.
Links#
👉 New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
👉
Download
products and start fast a new project👉 Bootstrap your startUp, MVP or Legacy project with a custom development sprint