themesberg/volt-react-dashboard themesberg/volt-react-dashboard

  • Stars
    star
    858
  • Rank 53,134 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated about 1 year ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
themesberg/volt-react-dashboard
github

themesberg

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Free and open source React.js admin dashboard template and UI library based on Bootstrap 5

Volt React Dashboard Bootstrap 5 Tweet

version license GitHub issues open GitHub issues closed

Volt React Dashboard Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

Powered by React.js

Volt React is an extension of the popular react-bootstrap library and it is based on the newest version of Bootstrap 5.

Data-driven

This library has been built using a data driven methodology, meaning that a large part of data, such as tasks, messages, user notifications are passed to the components as an array of objects. This will make it easy to connect the UI interface with any back-end API.

Bootstrap 5

This library is based on the latest version of the Bootstrap 5 CSS framework which brought many improvements, such as dropping dependency on jQuery, introducing RTL support, the utility API and many other style and markup improvements.

Over 100 React Components

Volt React included over 100 React UI elements such as buttons, form elements, alerts, modals, tabs, navigation bars, date pickers, and many more. They are all custom styled by professional designers as an extension of the base Bootstrap elements using Sass variables, mixins, and custom markup.

10 Example Dashboard Pages

Get started with 10 beautiful example pages for a dashboard which is based on the most popular dashboard template written in Bootstrap 5, called Volt Dashboard.

Getting Started and live code editor

Every component, plugin and getting started is thoroughly documented on our online documentation.

Tutorial

We also wrote a tutorial on how you can install the project, explore the UI elements, create a new page, customize the Sass variables and upload the production code to the server.

Workflow

This product is built using the following widely used technologies:

  • React.js front-end library
  • Bootstrap 5 CSS Framework
  • Sass preprocessing language
  • NPM & Yarn

Table of Contents

Versions

.

HTML React
Volt Bootstrap 5 Dashboard HTML Volt React Dashboard

Demo

Dashboard Transactions Settings Forms
Dashboard Transactions Settings Tables
Sign in Sign up Forgot password Reset password
Sign in Sign up Forgot Password Reset password
Lock Profile 404 Not Found 500 Server Error Documentation
Lock Profile 404 Not Found 500 Server Error Documentation

Quick start

  1. Register and Download from Themesberg or clone this repository
  2. Download the project's zip

Using Yarn

  1. Make sure you have Yarn installed.
  2. After installing yarn, open a terminal and run yarn install in the main volt folder to download all project dependencies.
yarn install
  1. Then start the app in development mode by running the following command in terminal:
yarn start

  1. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.

  2. If you want to generate the production files, change the homepage value from the package.json to the domain name that the app will be hosted on, and then run the following command in the terminal:

yarn build

Using NPM

  1. Make sure you have Node.js installed. Make sure the installed Node version is >= 8.10 and of npm >= 5.6

  2. After installing Node.js, open a terminal and run npm install in the main volt-react-dashboard/ folder to download all project dependencies. You'll find them in the node_modules/ folder.

npm install
  1. Then start the app in development mode by running the following command in terminal:
npm run start

  1. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.

  2. If you want to generate the production files, change the homepage value from the package.json to the domain name that the app will be hosted on, and then run the following command in the terminal:

npm run build

Documentation

Every component, plugin and getting started is thoroughly documented on our online documentation.

File Structure

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

Volt React Dashboard
.
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── mstile-150x150.png
│   ├── robots.txt
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
├── src
│   ├── assets
│   │   ├── img
│   │   └── syntax-themes
│   ├── components
│   │   ├── AccordionComponent.js
│   │   ├── Charts.js
│   │   ├── Code.js
│   │   ├── CodeEditor.js
│   │   ├── Documentation.js
│   │   ├── Footer.js
│   │   ├── Forms.js
│   │   ├── Navbar.js
│   │   ├── Preloader.js
│   │   ├── Progress.js
│   │   ├── ScrollToTop.js
│   │   ├── Sidebar.js
│   │   ├── Tables.js
│   │   └── Widgets.js
│   ├── data
│   │   ├── charts.js
│   │   ├── commands.js
│   │   ├── features.js
│   │   ├── notifications.js
│   │   ├── pages.js
│   │   ├── tables.js
│   │   ├── teamMembers.js
│   │   └── transactions.js
│   ├── index.js
│   ├── pages
│   │   ├── HomePage.js
│   │   ├── Presentation.js
│   │   ├── Settings.js
│   │   ├── Transactions.js
│   │   ├── components
│   │   ├── dashboard
│   │   ├── documentation
│   │   ├── examples
│   │   └── tables
│   ├── routes.js
│   └── scss
│       ├── volt
│       └── volt.scss
└── yarn.lock

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Upgrade to Pro

If you'd like to support this open source software, we invite you to check out the premium version of this React dashboard called Volt Pro React Dashboard. It features over 800 React components, customized pugins, and 20 example pages.

Reporting Issues

We use GitHub Issues as the official bug tracker for Volt React Dashboard. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Volt React Dashboard. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

More Repositories

1

flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
HTML
6,463
star
2

volt-bootstrap-5-dashboard

Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
HTML
2,567
star
3

flowbite-react

Official React components built for Flowbite and Tailwind CSS
TypeScript
1,872
star
4

flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
Svelte
1,722
star
5

flowbite-admin-dashboard

Free and open-source admin dashboard template built with Tailwind CSS and Flowbite
HTML
1,348
star
6

tailwind-dashboard-windster

Free and open-source admin dashboard interface built on top of Tailwind CSS and Flowbite
HTML
837
star
7

neumorphism-ui-bootstrap

Neumorphism inspired UI Kit: web components, sections and pages in neumorphic style built with Bootstrap CSS Framework
HTML
829
star
8

flowbite-vue

Official Vue 3 components built for Flowbite and Tailwind CSS
Vue
768
star
9

landwind

Responsive and clean landing page built with Tailwind CSS and Flowbite
HTML
602
star
10

flowbite-astro-admin-dashboard

Open-source admin dashboard template built with Astro, Flowbite, and Tailwind CSS
Astro
544
star
11

pixel-bootstrap-ui-kit

Pixel UI Kit - Free and open source Bootstrap 5 UI Kit without jQuery
HTML
530
star
12

windows-95-ui-kit

💾 Windows 95 UI Kit made with Bootstrap 4 components
CSS
464
star
13

glass-ui

CSS UI library based on the glassmorphism design specifications
309
star
14

volt-laravel-dashboard

Free and open-source Laravel admin dashboard interface built with Livewire & Alpine.js based on Bootstrap 5
Blade
283
star
15

flowbite-angular

Official Angular components built for Flowbite and Tailwind CSS
TypeScript
182
star
16

simple-bootstrap-5-dashboard

Simple Bootstrap 5 Admin Dashboard Template
HTML
164
star
17

swipe-one-page-bootstrap-5

👆 Swipe - One Page Bootstrap 5 Template for Mobile Applications
SCSS
162
star
18

flowbite-icons

Free and open-source collection of SVG icons built for Flowbite and Tailwind CSS
151
star
19

flowbite-svelte-admin-dashboard

Free and open-source admin dashboard template built with Flowbite, Svelte, and Tailwind CSS
Svelte
95
star
20

tailwind-landing-page

A responsive landing page built with Tailwind CSS and Flowbite Blocks
HTML
90
star
21

flow-ui

Accessibility oriented design system for developing fast and powerful web interfaces.
89
star
22

flowbite-react-admin-dashboard

A free and open-source admin dashboard interface built with Flowbite, React, and Tailwind CSS
TypeScript
66
star
23

tailwind-figma-ui-kit

FlowBite is a free and open-source set of UI components and pages in Figma built for Tailwind CSS
63
star
24

flowbite-svelte-blocks

Flowbite-Svelte-Blocks components
Svelte
63
star
25

tailwind-flask-starter

Tailwind CSS and Flask starter project with Flowbite included
HTML
52
star
26

tailwind-vue-starter

A free and open-source starter project to help you get started with the core Flowbite Library components and Vue 3
Vue
47
star
27

flowbite-svelte-icons

Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Svelte
Svelte
41
star
28

tailwind-nuxt-starter

A free and open-source starter project to help you get started with the core Flowbite Library components and Nuxt.js
Vue
39
star
29

gpt-3-tailwindcss

GPT-3 Tailwind CSS Code Generator
37
star
30

flowbite-blazor

Official open-source UI component library for Blazor (.NET), Flowbite and Tailwind CSS
HTML
32
star
31

tailwind-phoenix-starter

Free and open-source starter kit for Phoenix (Elixir), Tailwind CSS and Flowbite
HTML
29
star
32

tailwind-astro-starter

Free and open-source starter project to help you get started with Astro, Tailwind CSS and Flowbite
Astro
23
star
33

flowbite-laravel

PHP
19
star
34

tailwind-css-tutorial

Tailwind CSS Tutorial Project Files
CSS
19
star
35

tailwind-typescript-starter

A free and open-source starter kit that helps you get started with Tailwind CSS, TypeScript and Flowbite
TypeScript
18
star
36

figma-admin-dashboard-template

Free and open-source Figma Admin Dashboard template
16
star
37

tailwind-blazor-starter

Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
HTML
14
star
38

simple-gulp-bootstrap-sass-browsersync-boilerplate

Files for the Gulp 4, Bootstrap, Sass and BrowserSync setup tutorial on Themesberg
CSS
14
star
39

bootstrap-5-tutorial

Bootstrap 5 tutorial with Gulp, Sass, BrowserSync, and Vanilla JS
HTML
13
star
40

tailwind-symfony-starter

Free and open-source starter kit for Symfony (PHP), Tailwind CSS and Flowbite
Twig
13
star
41

flowbite-react-icons

Flowbite React Icon library is the official collection of SVG icons, provided freely and as open-source
TypeScript
8
star
42

tailwind-angular-starter

Free and open-source starter project to help you get started with Angular, Tailwind CSS and the Flowbite UI components
HTML
8
star
43

flowbite-snippets

Code snippets from the Flowbite UI component library that you can use inside VS Code
JavaScript
7
star
44

tailwind-solidjs-starter

Free and open-source starter project for SolidJS, Tailwind CSS and Flowbite
JavaScript
6
star
45

th-volt-pro-laravel-admin-dashboard

Fullstack tool featuring Laravel CRUDs, hundreds of UI components and dozens of example pages.
6
star
46

pixel-pro-bootstrap-ui-kit

Official public repository for Pixel Pro Bootstrap UI Kit
6
star
47

flowbite-blade-icons

Official collection of Flowbite SVG icons in Blade
PHP
6
star
48

tailwind-qwik-starter

Open-source starter project for Qwik, Tailwind CSS, and Flowbite
TypeScript
3
star
49

tailwind-gatsby-starter

Free and open-source starter project for Gatsby, Tailwind CSS and Flowbite
JavaScript
3
star
50

flowbite-nuxt-module

Open-source module for Nuxt with auto import for the Flowbite Vue library
TypeScript
3
star
51

th-neumorphism-ui-pro

Neumorphism inspired premium Bootstrap UI Kit
2
star
52

tailwind-remix-starter

Free and open-source starter kit that helps you get started with Tailwind CSS, Remix and Flowbite React
CSS
2
star
53

flowbite-express

Flowbite-Express
EJS
2
star
54

flowbite-phoenix

Official Flowbite UI components built for the Phoenix framework based on Tailwind CSS
Elixir
1
star
55

.github

Ecosystem of open-source projects, libraries and tools built by the team behind Flowbite
1
star
56

flowbite-vue-icons

Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Vue
1
star