DEV Community

loading...
Cover image for Show dev: open-source admin dashboard UI library in React.js and Bootstrap 5
Themesberg

Show dev: open-source admin dashboard UI library in React.js and Bootstrap 5

zolidev profile image Zoltán Szőgyényi Originally published at themesberg.com ・3 min read

Hello, devs! Together with my team from Themesberg 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 and the Github repository. It's open-source under the MIT License. A star would help us to spread the open-source love <3

Volt React Dashboard

Quick start

Register and Download from Themesberg or clone this repository

Download the project's zip

Using Yarn

Make sure you have Yarn installed.

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

yarn install
Enter fullscreen mode Exit fullscreen mode

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

yarn start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Using NPM

Make sure you have Node.js 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
Enter fullscreen mode Exit fullscreen mode

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

npm run start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 plugins, and 20 example pages.

Discussion (0)

pic
Editor guide