React后台

hope-ui-react-dashboard — React 后台模板

作者 iqonicdesignofficial

Hope UI 的开源 React 后台管理模板，基于 Bootstrap 5 设计系统，提供多种布局、菜单样式与明暗/方向模式，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览首屏预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

基于 Bootstrap 5 设计系统的 React 后台模板

02

提供默认、盒式、水平、双栏等多种仪表盘布局

03

内置 30 种以上菜单样式与布局设置面板

04

支持明暗颜色模式与 LTR/RTL 方向模式

05

SCSS 按组件组织，包含 dark、rtl、customizer 等目录

06

采用 MIT 许可，可免费使用、修改和分发

模板详细介绍

Hope UI React Dashboard 是 Iqonic Design 发布的免费开源后台管理模板，仓库采用 MIT 许可。它基于 Bootstrap 5 设计系统构建，面向 React 项目，提供后台管理界面所需的布局、菜单、图表和 UI 组件。

模板内置多种仪表盘布局（默认、盒式、盒式花式、水平、双栏紧凑、双栏水平、简单），并附带 30 种以上菜单样式。它支持颜色模式（明/暗）与方向模式（LTR/RTL），并提供布局设置面板，方便在开发阶段调整界面外观。

项目包含演示页面和 UI Kit 视图，SCSS 按组件组织，涵盖 bootstrap、custom、customizer、hope-ui-design-system、dark、rtl 等目录。README 还列出 HTML、Vue、Laravel 等其他技术栈版本，但本仓库只提供 React 版本。

使用限制方面，免费范围仅限该 MIT 许可版本代码；演示图片、字体、图标等第三方素材需单独核对许可，域名、托管、数据库等外部服务可能产生费用。

React后台

适合你的项目吗？

适用场景

  • 快速搭建 React 后台管理界面的基础框架
  • 需要明暗主题或 RTL 方向支持的管理面板
  • 在多种布局与菜单样式之间切换选型的项目
  • 基于 Bootstrap 5 设计系统进行二次开发的仪表盘

适合人群

  • 使用 React 开发后台管理系统的开发者
  • 需要免费 MIT 许可后台模板的团队
  • 希望基于 Bootstrap 5 设计系统快速起步的项目
  • 需要多布局、多菜单样式选项的管理界面

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    可通过 GitHub 直接下载 ZIP，或使用 npm install 安装依赖

  2. 2

    开发运行使用 npm start，生产构建使用 npm run build

  3. 3

    README 中的文档链接指向 HTML 版说明，非 React 专属文档

  4. 4

    演示图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 代码与文档版权归 Iqonic Design 所有，仅代码部分按 MIT 许可发布；使用时须保留版权与许可声明。
  • README 的 Special Thanks 列出 Bootstrap、Google Fonts、Jquery、Apex Charts 等第三方资源，其许可需另行核对，不随 MIT 代码许可一并授予。
  • 文档与更多说明托管在 iqonic.design 外部站点，使用前需访问外部服务，可能涉及网络与第三方服务成本。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

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.

README 原文

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

README 原文

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

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

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 60 / 100
技术栈
React
网站类型
后台
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2023-09-26
截图检查日期
2026-10-02

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 8e22009af9a2648d45ce2627aae16beff29120626865713edb40c1fb0c647dd7

2026-10-02T09:55:36.949Z

来源文件 / 仓库

<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.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

ant-design-pro

ant-design-pro

Ant Design Pro 是 Ant Design 官方推出的企业级中后台前端脚手架，基于 React 19、Umi Max 4 和 antd 6 构建，内置 TypeScript 支持。

React · 后台

coreui-free-react-admin-template

coreui-free-react-admin-template

Free React Admin & Dashboard Template Built for AI-Assisted Development

React · 后台

fastapi-react

fastapi-react

fastapi-react 是一个基于 Cookiecutter 的模板，用于快速搭建 FastAPI 与 React（TypeScript）的全栈项目。

React · 后台

react-antd-admin-template

react-antd-admin-template

一个基于React+Antd的后台管理模版，在线预览https://nlrx-wjc.github.io/react-antd-admin-template/

React · 后台

react-saas-template

react-saas-template

🌊 Template for building an SaaS / admin website using React + Material-UI

React · 后台

react-material-admin

react-material-admin

☄️React Material Admin is a React template built with Material-UI

React · 后台