DEV Community

Cover image for ⚡️Volt - Open Source Bootstrap 5 Admin Dashboard (Vanilla JS)
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at themesberg.com

⚡️Volt - Open Source Bootstrap 5 Admin Dashboard (Vanilla JS)

Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS.

Bootstrap 5 and Vanilla Javascript

Volt is built using the latest version of Bootstrap 5 and because jQuery is no longer required as a dependency, Volt has been built using only Vanilla JS.

100+ Components

There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on. Check out the components on the official documentation.

11 Example Pages

Volt brings 11 example pages including an overview, sign in, sign up, transactions page and many more.

3 Lightweight Plugins

There are 3 lightweight and Vanilla JS plugins that come with Volt, namely a date picker, notification and charts library.

Advanced development flow

By downloading you will get an advanced development workflow package including Sass files and a Gulp commands file that will let you build minified and un-minified project files with the ability to even add certain blocks of code based on your environment.

Well documented

Volt is a thoroughly documented dashboard which covers everything from getting started to having all of the components and plugins well described. Check out our quick start guide.

Open source project

Volt is a free and open source project under the MIT License so if you appreciate this project you can give the public Github repository a star and spread the open source love ❤️.

Quick start

  1. Download from Themesberg or clone this repository
  2. Download the project's zip
  3. Make sure you have Node locally installed.
  4. Download Gulp Command Line Interface to be able to use gulp in your Terminal.
npm install gulp-cli -g
Enter fullscreen mode Exit fullscreen mode
  1. After installing Gulp, run npm install in the main volt/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run gulp in the volt/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.
gulp
Enter fullscreen mode Exit fullscreen mode

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev
Enter fullscreen mode Exit fullscreen mode

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist
Enter fullscreen mode Exit fullscreen mode

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Volt is hosted on our website.

File Structure

Within the download you'll find the following directories and files:

Volt Bootstrap 5 Admin Dashboard
.
├── README.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── img
    │   └── js
    ├── index.html
    ├── pages
    │   ├── components
    │   ├── dashboard
    │   ├── examples
    │   ├── settings.html
    │   ├── tables
    │   └── transactions.html
    ├── partials
    │   ├── _analytics.html
    │   ├── _footer.html
    │   ├── _head.html
    │   ├── _navigation.html
    │   ├── _pages-preview.html
    │   ├── _preloader.html
    │   ├── _scripts.html
    │   └── dashboard
    └── scss
        ├── volt
        └── volt.scss
Enter fullscreen mode Exit fullscreen mode

Upgrade to Pro

There is also a pro version of Volt which has more than 800 components, 20 example pages, and over 10 advanced plugins that can take your admin dashboard application to the next level. Check out Volt Pro Premium Bootstrap 5 Admin Dashboard.

Top comments (1)

Collapse
 
mohamm4d profile image
mohamm4d

I just install it , Very great admin template ,

it would be great if you could update it with latest creat-react-app .
Too many deprecated packages !