ReactAdmin dashboard

hope-ui-react-dashboard — React Admin dashboard Template

By iqonicdesignofficial

Hope UI's open-source React admin template, based on the Bootstrap 5 design system, offers multiple layouts, menu styles, and light/dark and direction modes, under the MIT license.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

React admin template based on the Bootstrap 5 design system

02

Offers multiple dashboard layouts including default, boxed, horizontal, and double column

03

Built-in over 30 menu styles and a layout settings panel

04

Supports light/dark color modes and LTR/RTL direction modes

05

SCSS organized by component, including directories such as dark, rtl, and customizer

06

Under the MIT license, free to use, modify, and distribute

Template Details

Hope UI React Dashboard is a free and open-source admin template released by Iqonic Design, with the repository under the MIT license. It is built on the Bootstrap 5 design system, targets React projects, and provides the layouts, menus, charts, and UI components needed for admin interfaces.

The template includes multiple dashboard layouts (default, boxed, boxed fancy, horizontal, double column compact, double column horizontal, simple) and comes with over 30 menu styles. It supports color modes (light/dark) and direction modes (LTR/RTL), and offers a layout settings panel to adjust the interface appearance during development.

The project includes demo pages and UI Kit views, with SCSS organized by component, covering directories such as bootstrap, custom, customizer, hope-ui-design-system, dark, and rtl. The README also lists versions for other tech stacks like HTML, Vue, and Laravel, but this repository only provides the React version.

Regarding usage restrictions, the free scope is limited to this MIT-licensed version of the code; third-party assets such as demo images, fonts, and icons require separate license verification, and external services like domains, hosting, and databases may incur costs.

ReactAdmin

Is it right for your project?

Use Cases

  • Quickly building a foundational framework for React admin interfaces
  • Admin panels requiring light/dark themes or RTL direction support
  • Projects selecting between multiple layouts and menu styles
  • Dashboards for secondary development based on the Bootstrap 5 design system

Suitable For

  • Developers building admin systems with React
  • Teams needing a free MIT-licensed admin template
  • Projects seeking a quick start based on the Bootstrap 5 design system
  • Admin interfaces requiring multiple layout and menu style options

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Can be downloaded directly as a ZIP from GitHub, or dependencies installed via npm install

  2. 2

    Use npm start for development and npm run build for production builds

  3. 3

    Documentation links in the README point to the HTML version, not React-specific docs

  4. 4

    Third-party assets such as demo images, fonts, and icons must be verified under their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is limited to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • Permits free use, modification, commercial use, and distribution of that version's code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as-is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Copyright for the code and documentation belongs to Iqonic Design; only the code portion is released under the MIT license, and copyright and license notices must be retained when used.
  • The README's Special Thanks lists third-party resources such as Bootstrap, Google Fonts, Jquery, and Apex Charts, whose licenses must be verified separately and are not granted along with the MIT code license.
  • Documentation and further instructions are hosted on the external site iqonic.design, requiring access to external services and potentially involving network and third-party service costs.
  • Demo images, fonts, icons, and other third-party assets must be verified under their respective licenses and cannot be judged solely based on the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Code and Documentation Copyright 2021 All Rights Reserved by [IQONIC](https://iqonic.design/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github) Design. Code released under the [MIT](https://iqonic.design/licenses/) License.

Original README

[Checkout complete list](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/sourceAndCredit.html)

Original README

[More Details...](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/gulp.html)

Original README
https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/blob/main/LICENSEhttps://github.com/iqonicdesignofficial/hope-ui-react-dashboard/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 60 / 100
Technologies
React
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2023-09-26
Screenshot last checked
2026-10-02

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 8e22009af9a2648d45ce2627aae16beff29120626865713edb40c1fb0c647dd7

2026-10-02T09:55:36.949Z

Source file / repository

<p align="center">
  <a href="https://hopeui.iqonic.design/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github" target="__blank" title="Hope UI">
    <img src="https://assets.iqonic.design/hope-ui/github/logo.png" />
  </a>
</p>
<p align="center">
<a href="https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/" target="__blank"><img src="https://img.shields.io/github/stars/iqonicdesignofficial/hope-ui-design-system" /> </a>
<a href="https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/pulse" target="__blank"><img src="https://img.shields.io/github/forks/iqonicdesignofficial/hope-ui-design-system" /> </a>
<a href="https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/issues" target="__blank"><img src="https://img.shields.io/github/issues/iqonicdesignofficial/hope-ui-design-system" /> </a>
<a href="#" target="__blank"><img src="https://img.shields.io/bower/v/editor.md.svg" /> </a>
<a href="https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/blob/main/LICENSE" target="__blank"><img src="https://img.shields.io/github/license/iqonicdesignofficial/hope-ui-design-system" /> </a>
<a href="https://twitter.com/iqonicdesign" target="__blank"><img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Fiqonicdesign" /></a>
</p>
<h3 align="center">Free Open Source Bootstrap 5 Design System.</h3>
<p align="center">
  <a href="https://templates.iqonic.design/hope-ui/html/dist" title="Hope UI"><strong>Live Demo</strong></a>
  <span>|</span>
  <a href="https://www.figma.com/community/file/1009728454881721702" title="Hope UI"><strong>Figma UI Kit</strong></a>
  <span>|</span>
  <a href="https://iqonic.design/product/admin-templates/hope-ui-admin-free-open-source-bootstrap-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github" title="Hope UI"><strong>HTML Dashboard</strong></a>
  <span>|</span>
  <a href="https://iqonic.design/product/admin-templates/hope-ui-open-source-vue-js-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github" title="Hope UI"><strong>Vue JS Dashboard</strong></a>
  <span>|</span>
  <a href="https://iqonic.design/product/admin-templates/hope-ui-free-open-source-react-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github" title="Hope UI"><strong>React JS Dashboard</strong></a>
  <span>|</span>
  <a href="https://iqonic.design/product/admin-templates/hope-ui-free-open-source-laravel-admin-panel/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github" title="Hope UI"><strong>Laravel Dashboard</strong></a>
</p>

------------

<a href="https://templates.iqonic.design/hope-ui/html/dist" target="__blank" title="Hope UI Dashboard">
  <img src="https://assets.iqonic.design/hope-ui/github/rtl-mode-min.png" alt="Hope UI Dashboard" />
</a>

Hope UI – free open source Bootstrap Design System is a gorgeously built UI kit based on bootstrap 5. The best free Bootstrap 5 design system is fully responsive and user-friendly, allowing Hope UI users to work effortlessly.
Being easily adaptable and flexible, Hope UI can be a go-to design system for the developer out there.

Looking up to creating a new application for a personal project or client? Hope UI – free open source Bootstrap design system can help build a robust and understandable admin dashboard or website without spending much time designing the whole thing from scratch.

### What Can You Do with The Hope UI

Hope UI is packed with finely-crafted UI elements, multiple styles of Menu, a set of graphs, charts, and animated icons.
Built ideally for developers, designers, and startups, or Creators, Hope UI brings design consistency and acts as a strong foundation to manage a successful web or app project.

### 5 Irresistible Reasons To Have Hope UI
- Unlike any other Design System, Hope UI is fully responsive which facilitates business owners to view the admin panel right from their mobile screens without losing the resolution.
- With the purpose of data presentation, this best free Bootstrap 5 design system comes with extensive elements and widgets to add texts and images. 
- Besides being super easy and rapidly adaptable features, Hope UI is the cost-effective way to control and overview web or app project performance with a pre-coded design system and examples.
- Hope UI is a strongly built system, a layout that focuses on both the scalability and performance of the project.
- Hope UI Packs 100+ Fully-Codes Elements and widgets backed with SCSS and Gulp to make the development easy and fast.


### Features

- Support with bootstrap 5
- Scss component based design
- Fully Responsive
- Clean Code
- Demo Pages
- Color Mode
- Direction Mode
- Layout Setting
- 30+ Menu Styles

<a href="https://www.youtube.com/watch?v=3OMj6nqDuAA" title="Hope UI" target="__blank">
  <img src="https://assets.iqonic.design/hope-ui/github/hope-ui-youtube.png" alt="Hope UI Video" />
</a>

# Table of Contents

  - [Quick Start](#quick-start)
    - [Method 1: Direct Download](#method-1-direct-download)
    - [Method 2: Using NPM](#method-2-using-npm)
  - [Documentation](#documentation)
  - [Version](#version)
  - [Public RoadMap](#public-roadmap)
  - [File Structure](#file-structure)
  - [Browser Support](#browser-support)
  - [Don't Buy a Coffee for Us Instead Support Us](#dont-buy-a-coffee-for-us-instead-support-us)
  - [More from Iqonic Design](#more-from-iqonic-design)
  - [Reporting Issues](#reporting-issues)
  - [Special Thanks](#special-thanks)
  - [Change Log](#change-log)
  - [Follow Us](#follow-us)
  - [Licensing](#licensing)

## Quick Start

You can use following method to get started with CSS and JS files of the design system.

### Method 1: Direct Download
[Dowload from Github](https://github.com/iqonicdesignofficial/hope-ui-react-dashboard/archive/refs/heads/main.zip)

[Download from Iqonic Design](https://iqonic.design/product/admin-templates/hope-ui-admin-free-open-source-bootstrap-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)
### Method 2: Using NPM
Start working with the design system
1. Install Dependency
```
npm install
```

2. Run on development 
```
npm start
```
3. Build for production
```
npm run build
```
[More Details...](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/gulp.html)
## Documentation
You can find our documentation [here](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/).

## Version
- [Figma](https://www.figma.com/community/file/1009728454881721702)
- [HTML Admin Dashboard](https://iqonic.design/product/admin-templates/hope-ui-admin-free-open-source-bootstrap-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)
- [Vue JS Dashobard](https://iqonic.design/product/admin-templates/hope-ui-open-source-vue-js-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)
- [React JS Dashobard](https://iqonic.design/product/admin-templates/hope-ui-free-open-source-react-admin-template/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)
- [Laravel Dashobard](https://iqonic.design/product/admin-templates/hope-ui-free-open-source-laravel-admin-panel/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)

## Public RoadMap
Checkout our public roadmap of Hope UI and also submit features requests [here](https://iqonic.design/hopeui-roadmap/).
## File Structure
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
github/hope-ui-admin-dashboard/

src
  ├── assets
  │    ├── images
  │    │    ├── icon.png
  │    │    ├── favicon.ico
  │    │    └── loader.gif
  │    |── scss
  │    |    ├── bootstrap/
  │    |    │     ├── forms/
  │    |    │     ├── helper/
  │    |    │     ├── mixins/
  │    |    │     ├── utilites/
  │    |    │     └── vendor/
  │    |    ├── custom
  │    |    │     ├── auth/
  │    |    │     ├── kanban/
  │    |    │     ├── pricing/
  │    |    │     └── ui-kit/
  |    |    ├──customizer
  │    |    │     ├── components/
  │    |    │     ├── layouts/
  │    |    │     ├── menu-style/
  │    |    │     ├── utilities/
  │    |    │     ├── components.scss
  │    |    │     ├── dark.scss
  │    |    │     ├── layout.scss
  │    |    │     └── variables.scss   
  │    |    ├── hope-ui-design-system
  │    |    │     ├── components/
  │    |    │     ├── helper/
  │    |    │     ├── layout-style/
  │    |    │     ├── pages/
  │    |    │     ├── plugins/
  │    |    │     ├── variables/
  │    |    │     └── variables.scss
  │    |    ├── dark
  │    |    │     ├── components/
  │    |    │     ├── helper/
  │    |    │     ├── layout-style/
  │    |    │     ├── pages/
  │    |    │     ├── plugins/
  │    |    │     ├── reboot/
  │    |    │     ├── _dark.scss
  │    |    │     └── _index.scss
  │    |    ├── rtl
  │    |    │     ├── components/
  │    |    │     ├── pages/
  │    |    │     ├── reboot/
  │    |    │     ├── utilities/
  │    |    │     └── _index.scss
  │    |    ├── rtl.scss
  │    |    ├── dark.scss
  │    |    ├── customizer.scss
  │    |    ├── custom.scss
  │    |    └── hope-ui.scss
  |    |
  |    └──sortable/
  │         └── Plugins Files
  │  
  │ 
  ├── components
  |    ├── partials
  |    |    ├──components
  │    |    |   ├── header-breadcrumb
  │    |    |   ├── logo
  │    |    |   ├── mobile-offcanvas
  │    |    |   ├── settingoffcanvas
  │    |    |   └── shareoffcanvas
  │    |    └──dashboard
  │    |        ├── FooterStyle/
  │    |        ├── HeaderStyle/
  │    |        └── SidebarStyle/
  │    ├── Card
  │    ├── circularprogressbar
  │    ├── counterup
  │    ├── datepicker
  │    ├── dropdown
  │    ├── leaflet
  │    ├── loader
  │    └── progress
  ├── layouts/dashboard
  |    ├── boxed-fancy
  |    ├── boxed
  |    ├── default
  |    ├── dual-Compact
  |    ├── dual-horizontally
  |    ├── horizontal
  |    └── simple 
  ├── plugins
  |    └──slider-tabs
  ├── router
  |    ├── boxed-fancy-router
  |    ├── boxed-router
  |    ├── defult-router 
  |    ├── horizontal-multi-2
  |    ├── horizontal-router
  |    ├── simple-router 
  |    └── index
  ├── store
  |    ├── setting
  |    |    └── setting
  |    └──index
  ├── views
  |    ├── dashboard/
  |    └── uikit/
  ├── App.js
  ├── App.test.js
  ├── index.js
  ├── reportWebVitals.js
  ├── setupTests.js
  ├── .env.development.local
  ├── .env.production.local
  ├── .gitignore
  ├── .htaccess
  ├── package-lock.json
  ├── package.json
  └── README.md
```
## Browser Support
![chrome](https://assets.iqonic.design/hope-ui/github/chrome.png)
![Firefox](https://assets.iqonic.design/hope-ui/github/Firefox.png)
![Safari](https://assets.iqonic.design/hope-ui/github/Safari.png)
![Microsoft](https://assets.iqonic.design/hope-ui/github/Microsoft%20edge.png)
![Operamini](https://assets.iqonic.design/hope-ui/github/Operamini.png)

## Don't Buy a Coffee for Us Instead Support Us
- Star our GitHub repo ⭐
- [Tweet about it](https://twitter.com/intent/tweet?text=Checkout%20%23HopeUI%20%E2%80%93%20Amazing%20open-source%20Bootstrap%205%20Admin%20Dashboard%20%26%20Design%20system.%20%23BuildwithHopeUI&url=https%3A%2F%2Fbit.ly%2F3ANB7gT).
- Submit bugs, or suggest new features and documentation updates 🔧
- Follow [@iqonicdesign](https://twitter.com/iqonicdesign) on Twitter.
- Follow Us on [Instagram](https://www.instagram.com/iqonicdesign/)
- Subscribe to Iqonic newsletter at [iqonic.design](https://iqonic.design)

## More from Iqonic Design
- [Free Products Every Week](https://iqonic.design/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github)
- [Premium Themes, templates, dashbaords, Apps, and more](https://iqonic.design/shop/?iqonic=1&orderby=sales&paged=1&product_for=premium)
- [Subscribe on Youtube](https://www.youtube.com/c/IqonicDesign)
- [Reach US](https://iqonic.design/contact-us/)
## Reporting Issues
Have a bug or a feature request? Raise a new issue at our [github](https://github.com/iqonicdesignofficial/hope-ui-design-system/issues) support

## Special Thanks
- [Bootstrap](https://getbootstrap.com/)
- [Google Fonts](https://www.google.com/fonts)
- [Jquery](https://jquery.com/)
- [Apex Charts](https://apexcharts.com/)
[Checkout complete list](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/sourceAndCredit.html)

## Change Log
[Click Here](https://templates.iqonic.design/hope-ui/documentation/html/dist/main/change-log.html) to check our full change log.
## Follow Us
- [Twitter](https://twitter.com/iqonicdesign)
- [Facebook](https://www.facebook.com/iqonicdesign/)
- [Dribbble](https://dribbble.com/IqonicDesign)
- [Instagram](https://www.instagram.com/iqonicdesign/)
- [Product Hunt](https://www.producthunt.com/posts/iqonic-design)
## Licensing
- Code and Documentation Copyright 2021 All Rights Reserved by [IQONIC](https://iqonic.design/?utm_source=github&utm_medium=github-description&utm_campaign=open_source_github) Design. Code released under the [MIT](https://iqonic.design/licenses/) License.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

ant-design-pro

ant-design-pro

Ant Design Pro is an enterprise-grade React admin scaffold built on React 19, Umi Max 4, and antd 6 with TypeScript.

React · Admin dashboard

coreui-free-react-admin-template

coreui-free-react-admin-template

CoreUI's free React admin template, built on React and the CoreUI component library, provides dashboard layouts, sidebar navigation, routing, and example views. It includes .cursorrules, ARCHITECTURE.md, and DEVELOPMENT.md context files, plus JSDoc comments and PropTypes, to support AI-assisted development.

React · Admin dashboard

fastapi-react

fastapi-react

A Cookiecutter template for FastAPI + React (TypeScript) full-stack projects, integrating PostgreSQL, SQLAlchemy, Alembic, Celery, Redis, JWT authentication, a react-admin admin panel, and a Docker Compose development environment with Nginx reverse proxy.

React · Admin dashboard

react-antd-admin-template

react-antd-admin-template

A React + Ant Design admin template for mid- and back-office products, with built-in login/logout, dynamic routing, permission checks, and user management.

React · Admin dashboard

react-saas-template

react-saas-template

A React and Material-UI template for SaaS or admin websites, offering dashboard, chart, blog, payment, and file upload components. It uses Create-React-App, React-Router, Recharts, React-Stripe-js, React-Dropzone, and React-Cropper, with theme colors centralized in src/theme.js.

React · Admin dashboard

react-material-admin

react-material-admin

React Material Admin is an MIT-licensed React admin template by Flatlogic, built on Material-UI. It provides dashboards, charts, tables, authentication, profile, and notification pages, with three color themes and responsive layouts.

React · Admin dashboard