Show dev: open-source admin dashboard UI library in React.js and Bootstrap 5
Tags: react, bootstrap, showdev, opensource
Published: 2021-01-22 10:48:00

Hello, devs! Together with my team from [Themesberg](https://themesberg.com) finished building our first admin dashboard UI library in React.js and Bootstrap 5! We've decided to call it Volt React Dashboard.

You can check out the [live demo](https://demo.themesberg.com/volt-react-dashboard) and the [Github repository](https://github.com/themesberg/volt-react-dashboard). It's open-source under the MIT License. A star would help us to spread the open-source love <3

![Volt React Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/obbr7p24q060dd96ggn9.png)

## Quick start

Register and Download from [Themesberg](https://themesberg.com/product/dashboard/volt-react) or clone this repository

Download the project's zip

### Using Yarn

Make sure you have [Yarn](https://yarnpkg.com/) installed.

After installing `yarn`, open a terminal and run `yarn install` in the main volt folder to download all project dependencies.

```
yarn install
```

Then start the app in development mode by running the following command in terminal:

```
yarn start
```

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

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

Make sure you have [Node.js](https://nodejs.org/en/) installed. Make sure the installed Node version is >= 8.10 and of npm >= 5.6

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
```

Then start the app in development mode by running the following command in terminal:

```
npm run start
```

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

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](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start).

## 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

```

## Resources

- Demo: <https://demo.themesberg.com/volt-react-dashboard>
- Download Page: <https://themesberg.com/product/dashboard/volt-react>
- Documentation: <#>
- License Agreement: <https://themesberg.com/licensing>
- Support: <https://themesberg.com/contact>
- Issues: [Github Issues Page](https://github.com/themesberg/volt-react-dashboard/issues)

## 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](https://themesberg.com/product/dashboard/volt-pro-react). It features over 800 React components, customized plugins, and 20 example pages.