Get started with an open-source admin dashboard UI library in React.js and Bootstrap 5
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
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
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 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.
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
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.
#react #bootstrap
