{"id":13746484,"url":"https://github.com/themesberg/volt-react-dashboard","last_synced_at":"2025-05-15T18:04:00.319Z","repository":{"id":38071846,"uuid":"331362202","full_name":"themesberg/volt-react-dashboard","owner":"themesberg","description":"Free and open source React.js admin dashboard template and UI library based on Bootstrap 5","archived":false,"fork":false,"pushed_at":"2024-01-27T11:17:42.000Z","size":4562,"stargazers_count":968,"open_issues_count":22,"forks_count":401,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-15T18:03:55.808Z","etag":null,"topics":["bootstrap","bootstrap-5","react","react-admin-template","react-bootstrap","react-bootstrap-5","react-dashboard"],"latest_commit_sha":null,"homepage":"https://demo.themesberg.com/volt-react-dashboard","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-20T16:17:34.000Z","updated_at":"2025-05-13T03:54:31.000Z","dependencies_parsed_at":"2024-08-03T06:02:11.136Z","dependency_job_id":"df3272b2-e961-40b3-8a32-a492fb894a77","html_url":"https://github.com/themesberg/volt-react-dashboard","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fvolt-react-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fvolt-react-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fvolt-react-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fvolt-react-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/volt-react-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394720,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-5","react","react-admin-template","react-bootstrap","react-bootstrap-5","react-dashboard"],"created_at":"2024-08-03T06:00:54.384Z","updated_at":"2025-05-15T18:04:00.301Z","avatar_url":"https://github.com/themesberg.png","language":"JavaScript","readme":"# [Volt React Dashboard Bootstrap 5](https://demo.themesberg.com/volt-react-dashboard) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026logo=twitter)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fthemesberg%2Fvolt-react-dashboard\u0026via=themesberg\u0026text=Check%20out%20this%20open%20source%20React%20Dashboard)\n\n[![version](https://img.shields.io/npm/v/@themesberg/volt-react-dashboard)](https://www.npmjs.com/package/@themesberg/volt-react-dashboard)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE.md)\n[![GitHub issues open](https://img.shields.io/github/issues/themesberg/volt-react-dashboard.svg)](https://github.com/themesberg/volt-react-dashboard/issues?q=is%3Aopen+is%3Aissue)\n[![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/themesberg/volt-react-dashboard.svg)](https://github.com/themesberg/volt-react-dashboard/issues?q=is%3Aissue+is%3Aclosed)\n\n[![Volt React Dashboard Bootstrap 5](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-react-dashboard/thumbnail.png)](https://demo.themesberg.com/volt-react-dashboard)\n\nVolt 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.\n\n## Powered by React.js\n\nVolt React is an extension of the popular [react-bootstrap](https://react-bootstrap.github.io/) library and it is based on the newest version of Bootstrap 5. \n\n## Data-driven\n\nThis 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.\n\n## Bootstrap 5\n\nThis library is based on the latest version of the [Bootstrap 5 CSS framework](https://getbootstrap.com/) which brought many improvements, such as [dropping dependency on jQuery](https://themesberg.com/blog/tutorial/bootstrap-5-tutorial), introducing RTL support, the utility API and many other style and markup improvements.\n\n## Over 100 React Components\n\nVolt 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.\n\n## 10 Example Dashboard Pages\n\nGet 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](https://github.com/themesberg/volt-bootstrap-5-dashboard).\n\n## Getting Started and live code editor\n\nEvery component, plugin and getting started is thoroughly documented on our [online documentation](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start).\n\n## Tutorial\n\nWe also [wrote a tutorial](https://themesberg.com/blog/tutorial/react-dashboard) 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.\n\n## Workflow\n\nThis product is built using the following widely used technologies:\n\n- React.js front-end library\n- Bootstrap 5 CSS Framework\n- Sass preprocessing language\n- NPM \u0026 Yarn\n\n## Table of Contents\n\n* [Version](#versions)\n* [Demo](#demo)\n* [Quick Start](#quick-start)\n* [Documentation](#documentation)\n* [File Structure](#file-structure)\n* [Browser Support](#browser-support)\n* [Resources](#resources)\n* [Upgrade to PRO](#upgrade-to-pro)\n* [Reporting Issues](#reporting-issues)\n* [Technical Support or Questions](#technical-support-or-questions)\n* [Licensing](#licensing)\n* [Useful Links](#useful-links)\n\n\n## Versions\n\n[\u003cimg src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true\" width=\"60\" height=\"60\" /\u003e](https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard)[\u003cimg src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true\" width=\"60\" height=\"60\" /\u003e](https://themesberg.com/product/dashboard/volt-react)[\u003cimg src=\"https://themesberg.s3.us-east-2.amazonaws.com/public/github/technology/laravel-logo.jpeg\" width=\"60\" height=\"60\" /\u003e](https://themesberg.com/product/laravel/volt-admin-dashboard-template).\n\n| HTML | React  |\n| --- | ---  |\n| [![Volt Bootstrap 5 Dashboard HTML](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg)](https://github.com/themesberg/volt-bootstrap-5-dashboard) | [![Volt React Dashboard](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-react-dashboard/thumbnail.png)](https://demo.themesberg.com/volt-react-dashboard/)\n\n## Demo\n\n| Dashboard | Transactions | Settings | Forms |\n| --- | --- | --- | --- |\n| [![Dashboard](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/overview.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/dashboard/overview) | [![Transactions](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/transactions.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/transactions) | [![Settings](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/settings.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/settings) | [![Tables](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/tables.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/tables/bootstrap-tables)\n\n| Sign in | Sign up | Forgot password | Reset password |\n| --- | --- | --- | --- |\n| [![Sign in](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/sign-in.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/sign-in) | [![Sign up](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/sign-up.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/sign-up) | [![Forgot Password](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/forgot-password.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/forgot-password) | [![Reset password](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/reset-password.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/reset-password)\n\n| Lock Profile | 404 Not Found | 500 Server Error | Documentation |\n| --- | --- | --- | --- |\n| [![Lock Profile](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/lock.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/lock) | [![404 Not Found](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/404.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/404) | [![500 Server Error](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/500.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/examples/500) | [![Documentation](https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-react-dashboard/github/docs.jpg)](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start)\n\n-   [Live Demo](https://demo.themesberg.com/volt-react-dashboard)\n-   [Download](https://themesberg.com/product/dashboard/volt-react)\n\n## Quick start\n\n1. Register and Download from [Themesberg](https://themesberg.com/product/dashboard/volt-react) or clone this repository\n2. Download the project's zip\n\n### Using Yarn\n\n3. Make sure you have [Yarn](https://yarnpkg.com/) installed.\n4. After installing `yarn`, open a terminal and run `yarn install` in the main volt folder to download all project dependencies.\n\n```\nyarn install\n```\n\n5. Then start the app in development mode by running the following command in terminal:\n\n```\nyarn start\n```\n\n6. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.\n\n7. 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:\n\n```\nyarn build\n```\n\n### Using NPM\n\n3. Make sure you have [Node.js](https://nodejs.org/en/) installed. Make sure the installed Node version is \u003e= 8.10 and of npm \u003e= 5.6\n\n4. 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.\n\n```\nnpm install\n```\n\n5. Then start the app in development mode by running the following command in terminal:\n\n```\nnpm run start\n```\n\n6. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.\n\n7. 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:\n\n```\nnpm run build\n```\n\n## Documentation\n\nEvery component, plugin and getting started is thoroughly documented on our [online documentation](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start).\n\n## File Structure\n\nWithin the download you'll find the following directories and files:\n\n```\nVolt React Dashboard\n.\n├── LICENSE.md\n├── README.md\n├── package-lock.json\n├── package.json\n├── public\n│   ├── android-chrome-192x192.png\n│   ├── android-chrome-512x512.png\n│   ├── apple-touch-icon.png\n│   ├── browserconfig.xml\n│   ├── favicon-16x16.png\n│   ├── favicon-32x32.png\n│   ├── favicon.ico\n│   ├── index.html\n│   ├── manifest.json\n│   ├── mstile-150x150.png\n│   ├── robots.txt\n│   ├── safari-pinned-tab.svg\n│   └── site.webmanifest\n├── src\n│   ├── assets\n│   │   ├── img\n│   │   └── syntax-themes\n│   ├── components\n│   │   ├── AccordionComponent.js\n│   │   ├── Charts.js\n│   │   ├── Code.js\n│   │   ├── CodeEditor.js\n│   │   ├── Documentation.js\n│   │   ├── Footer.js\n│   │   ├── Forms.js\n│   │   ├── Navbar.js\n│   │   ├── Preloader.js\n│   │   ├── Progress.js\n│   │   ├── ScrollToTop.js\n│   │   ├── Sidebar.js\n│   │   ├── Tables.js\n│   │   └── Widgets.js\n│   ├── data\n│   │   ├── charts.js\n│   │   ├── commands.js\n│   │   ├── features.js\n│   │   ├── notifications.js\n│   │   ├── pages.js\n│   │   ├── tables.js\n│   │   ├── teamMembers.js\n│   │   └── transactions.js\n│   ├── index.js\n│   ├── pages\n│   │   ├── HomePage.js\n│   │   ├── Presentation.js\n│   │   ├── Settings.js\n│   │   ├── Transactions.js\n│   │   ├── components\n│   │   ├── dashboard\n│   │   ├── documentation\n│   │   ├── examples\n│   │   └── tables\n│   ├── routes.js\n│   └── scss\n│       ├── volt\n│       └── volt.scss\n└── yarn.lock\n\n```\n\n## Browser Support\n\nAt present, we officially aim to support the last two versions of the following browsers:\n\n\u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png\" width=\"64\" height=\"64\"\u003e \u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png\" width=\"64\" height=\"64\"\u003e \u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png\" width=\"64\" height=\"64\"\u003e \u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png\" width=\"64\" height=\"64\"\u003e \u003cimg src=\"https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png\" width=\"64\" height=\"64\"\u003e\n\n## Resources\n\n- Demo: \u003chttps://demo.themesberg.com/volt-react-dashboard\u003e\n- Download Page: \u003chttps://themesberg.com/product/dashboard/volt-react\u003e\n- Documentation: \u003chttps://demo.themesberg.com/volt-react-dashboard/#/documentation/overview\u003e\n- License Agreement: \u003chttps://themesberg.com/licensing\u003e\n- Support: \u003chttps://themesberg.com/contact\u003e\n- Issues: [Github Issues Page](https://github.com/themesberg/volt-react-dashboard/issues)\n\n## Upgrade to Pro\n\nIf 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 pugins, and 20 example pages.\n\n## Reporting Issues\n\nWe 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:\n\n1. Make sure that you are using the latest version of Volt React Dashboard. Check the CHANGELOG from your dashboard on our [website](https://themesberg.com/product/dashboard/volt-react#changelog).\n2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.\n3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.\n\n## Technical Support or Questions\n\nIf you have questions or need help integrating the product please [contact us](https://themesberg.com/contact) instead of opening an issue.\n\n## Licensing\n\n- Copyright 2021 Themesberg (Crafty Dwarf LLC) (https://themesberg.com)\n- Themesberg [license](https://themesberg.com/licensing#mit) (MIT License)\n\n## Useful Links\n\n- [React themes](https://themesberg.com/templates/react) from Themesberg\n- [Affiliate Program](https://themesberg.com/affiliate)\n\n##### Social Media\n\nTwitter: \u003chttps://twitter.com/themesberg\u003e\n\nFacebook: \u003chttps://www.facebook.com/themesberg/\u003e\n\nDribbble: \u003chttps://dribbble.com/themesberg\u003e\n\nInstagram: \u003chttps://www.instagram.com/themesberg/\u003e\n","funding_links":[],"categories":["Admin Dashboards"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fvolt-react-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Fvolt-react-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fvolt-react-dashboard/lists"}