管理仪表板 - 20 个使用 React、Vue、Angular 和 Bootstrap 编码的免费仪表板

你好，程序员们，

本文精选了一些由知名机构和开源爱好者使用React、Vue、Angular或Bootstrap等现代框架免费编写的开源管理面板。所有项目均可从 Github 下载，用于编程爱好者和商业项目。

此处列出的所有产品的许可证允许爱好者和商业产品进行无限制复制。关于此精选列表的另一个（重要）方面：

• 所有项目均在 win10 和 Ubuntu 18.04 上进行交叉测试
• 要编译源代码，请使用 Node12.x
• 一些套件需要 Gulp（全局依赖）
• 大多数产品可以直接从 GH 下载
• 这是一个开放的列表。欢迎在评论区提出更多项目建议。

披露——本帖子包含附属链接。

如果您使用这些链接购买商品（无需额外付费），我可能会获得佣金、产品或服务。谢谢！

🔥 React Argon ChakraUI

使用适用于Chakra UI和React的创新管理模板开始​​您的开发。Argon Dashboard Chakra 由 70 多个前端独立元素构建，例如按钮、输入、导航栏、导航选项卡、卡片或警报，让您可以自由选择和组合。

✨ Argon Dashboard Chakra - 现场演示

这个开源软件Chakra UI Dashboard带有预先构建的设计块，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。

🔥软 UI 仪表板

Soft UI Dashboard 是一款由 Creative-Tim 精心打造的开源 Bootstrap 5 模板。该产品包含 70 多个前端独立元素，例如按钮、输入框、导航栏、导航标签、卡片或警报，让您可以自由选择和组合。

✨ Soft UI 仪表板- 产品页面

这款 Bootstrap 5 设计遵循了 Soft UI 设计系统的概念，这是这家优秀机构提供的一种现代设计模式。该产品自带预置的设计模块，因此开发过程流畅顺畅，从我们的页面切换到实际网站也非常容易。

贝里角

Berry Angular 是最风格化的管理模板，定期更新，旨在帮助开发人员和设计人员节省通常用于设计像素完美布局和常用组件的时间。

• 👉 Berry Angular Dashboard - 官方产品页面
• 🎁 更多Angular 模板- 由CodedThemes

感谢阅读！以下是按技术分类的链接：

• （React） 管理仪表板 - React Black
• （React） 管理仪表板 - React Argon
• （React） 管理面板 - React Light Blue
• （React） 管理仪表板 - React Material Lite
• （React） 管理仪表板 - React Datta Able

• (Vue) 管理仪表板 - Vue 黑色
• （Vue） 管理仪表板 - Vue 白色
• (Vue) 管理仪表板 - Vue Argon
• (Vue) 管理仪表板 - Vue Star Admin
• (Vue) 管理仪表板 - Vue ArchitectUI

• （Angular） 管理仪表板 - Angular Black
• （Angular） 管理仪表板 - Angular Ngx-Admin
• （Angular） 管理仪表板 - Angular Star Admin
• （Angular） 管理仪表板 - Angular Argon
• （Angular） 管理仪表板 - Angular Material

• （Bootstrap） 管理仪表板 - 黑色设计
• （Bootstrap） 管理仪表板 - Volt 设计
• （Bootstrap） 管理仪表板 - CoreUI
• （Bootstrap） 管理仪表板 - Argon
• （Bootstrap） 管理仪表板 - Datta Able

基于 React 的仪表板

Argon Material-UI React

Argon Dashboard Material-UI 是一款开源的React 仪表板，采用现代 Material 设计风格。Argon Dashboard Material-UI 由 100 多个独立组件构建而成，让您可以自由选择和组合。所有组件均可采用不同的颜色，您可以使用 JSS 文件轻松修改。

• Argon Material-UI React - 产品页面
• Argon Material-UI React PRO - 更多页面和组件

管理仪表板 - React Black

主题提供商 - Creative-Tim

Black Dashboard React 是一款美观的 Bootstrap 4、React 和 React (create-react-app) 管理仪表板，它拥有大量可组合的组件，外观精美。如果您正在寻找一款用于管理和可视化业务数据的工具，那么这款仪表板正是您的理想之选。它融合了赏心悦目的色彩、宽敞的卡片、精美的排版和图形。Black Dashboard React 包含您在项目中可能需要的所有插件，并附有入门文档。它轻巧易用，功能强大。

Black Dashboard React 拥有超过 16 个独立组件，让您可以自由选择和组合。这意味着有数千种可能的组合。所有组件都可以采用不同的颜色，您可以使用 SASS 文件轻松修改。由于所有元素都已实现，您将节省大量从原型设计到完整功能代码的时间。我们考虑周全，因此此仪表板提供两个版本：暗模式和亮模式。

• React Dashboard Black - 产品页面
• React Dashboard Black PRO - 高级版本

管理仪表板 - React Argon

主题提供商 - Creative-Tim

使用 create-react-app 制作的适用于 Bootstrap 4、React 和 Reactstrap 的仪表板，开启您的开发之旅。它开源免费，并包含众多组件，助您打造精彩的网站。

Argon Dashboard React 由 100 多个独立组件构建而成，让您可以自由选择和组合。所有组件均可采用不同的颜色，您可以使用 SASS 文件轻松修改。由于所有元素均已实现，您将节省大量从原型设计到完整功能代码的时间。此 Dashboard 附带预置示例，因此开发过程无缝衔接，从我们的页面切换到实际网站也非常容易。每个元素都支持多种颜色、样式、悬停和焦点状态，您可以轻松访问和使用。

• React Dashboard Argon - 产品页面
• React Dashboard Argon PRO - 高级版本

管理仪表板 - React Light Blue

主题提供商——FlatLogic

Light Blue Free React Template 是一个开源 Web 应用程序模板，尤其适用于构建界面精美的管理仪表板界面。它基于最新版本的 React、Bootstrap 和 Webpack 构建。这款入门模板可以作为创建 SAAS、CRM、财务管理等应用程序的良好框架。

• 管理仪表板 React Light Blue - 产品
• 管理仪表板 React Light Blue - 产品

管理仪表板 - React Material Lite

主题提供商 - WrapPixel

Material React Admin Lite 是一款精心打造的精美 React 管理仪表板模板，适用于 2019 年。它采用模块化和现代设计理念构建。Material React Admin Lite 完全免费下载，可用于您的个人和商业项目。

链接

• React MaterialPro Lite - 产品页面
• React MaterialPro - 高级版本

管理仪表板 - React Datta Able

主题提供商 - CodedThemes

Datta Able 是一款免费的 React 管理模板，与市面上所有其他管理模板相比，功能更丰富。它拥有功能丰富的页面和组件，并完全以开发人员为中心。在开发 Datta Able 之前，我们的重点是性能和设计。在开发过程中，我们进行了各种测试和代码优化，以打造出这款以性能和设计为中心的后端应用程序。

仪表板链接

• React Datta Able - 产品页面
• React Datta Able PRO - 高级版本

基于 Vue 的仪表板

管理仪表板 - Vue 白色

主题提供商 - Creative-Tim

Vue Dashboard White是一款美观的 Bootstrap 4 和 Vue.js 管理面板，它集成了大量可完美组合的组件，外观惊艳。由于所有元素均已实现，从原型设计到完整功能代码的编写，您将节省大量时间。
每个元素都拥有多种状态，例如颜色、样式、悬停和焦点，您可以轻松访问和使用它们。

• 管理仪表板 Vue 白色- 产品页面

管理仪表板 - Vue Argon

主题提供商 - Creative-Tim

Vue Dashboard Argon是一款由 Creative-Tim 设计的管理面板，包含 100 多个独立组件。使用这款应用，任何具备一定Vue知识的开发人员都可以在几个小时内构建一个功能齐全、可直接部署到生产环境中的管理面板。

• Vue Dashboard Argon - 产品页面
• Vue Dashboard Argon PRO - 高级版

管理仪表板 - Vue Star Admin

主题提供商 - BootstrapDash

Vue Dashboard - Star Admin模板功能丰富，组件丰富，包含大量元素、图标、按钮和其他必备组件。该模板还能确保在移动和桌面设备上均提供良好的用户体验。定制模板以满足 Web 应用开发项目的特定需求可能看似颇具挑战性。

• Vue Star Admin - 产品页面
• Vue Star Admin PRO - 高级版

管理仪表板 - Vue ArchitectUI

主题提供商 - ArchitectUI

作为基础框架，ArchitectUI Vue 由@vue /cli 3.4.1 版本和 Bootstrap 4 Vue 实现提供支持。它包含 15 个精心挑选的 Vue 小部件和组件，它们彼此完美集成，从而创建了一种通用的设计语言。要使用此 Vue 主题，您至少需要具备基本的编码技能。不用担心，该主题的编码非常简单，并使用 Vue Router 来创建导航链接。

• Vue Dashboard ArchitectUI - Github 仓库
• Vue Dashboard ArchitectUI - 现场演示

管理仪表板 - Vue Black

主题提供商 - Creative-Tim

Vue Dashboard Black是一款美观的 Bootstrap4 和管理面板，拥有丰富的组件和独特的用户界面。Vue Black Dashboard 拥有超过 16 个独立组件，让您可以自由选择和组合。这意味着有数千种可能的组合方式。所有组件都可以采用不同的颜色，您可以使用 SASS 文件轻松修改。由于所有元素都已实现，您将节省大量从原型设计到完整功能代码的时间。

• Dashboard Vue Black - 产品页面
• Dashboard Vue Black PRO - 高级版

基于 Angular 的仪表板

管理仪表板 - Angular Ngx-Admin

主题提供商 - Ngx-Admin

Ngx-Admin Dashboard 是一款基于 Angular 9+ 和 Bootstrap 4+ 的热门管理仪表板，免费开源，可用于个人和商业用途。该模板包含许多流行的 UI 组件，并采用统一的配色方案。此外，它基于现代 Angular 框架，并具有灵活的组件式结构。

链接

• Ngx-Admin，产品页面
• Ngx-Admin 演示，默认（浅色）主题
• Ngx-Admin 演示，深色主题

管理仪表板 - Angular Black

主题提供商 - Creative-Tim

使用 angular-cli 制作的 Bootstrap 4 和 Angular 仪表板，开启您的开发之旅。它开源免费，并包含众多组件，助您打造精彩的网站。

Black Dashboard Angular 是一款美观的 Bootstrap 4 管理仪表板，它使用 Angular 构建，并集成了大量可轻松组合的组件，外观惊艳。如果您正在寻找一款用于管理和可视化业务数据的工具，那么这款仪表板正是您的理想之选。它融合了赏心悦目的色彩、宽敞的卡片、精美的排版和图形。Black Dashboard Angular 包含项目中可能需要的所有插件，并附有入门文档。它轻巧易用，功能强大。

• 仪表板 Angular Black - 产品页面
• Dashboard Angular Black PRO - 高级版

Angular Star 管理员

主题提供商 - BootstrapDash

Star Admin Angular 免费模板是一款美观且专业的免费模板，适用于各种 Web 开发项目。
该免费模板提供构建出色 Web 应用程序所需的一切功能。它还可以轻松定制，以满足不同 Web 开发项目的需求。这进一步简化了 Web 应用的开发流程。免费模板包含表格、标签、徽章、警报、图标和其他实用组件。

链接

• Angular Star Admin - 产品页面
• Angular Star Admin PRO - 高级版

管理仪表板 - Angular Argon

主题提供商 - Creative-Tim

使用 angular-cli 制作的 Bootstrap 4 和 Angular 仪表板，开启您的开发之旅。它开源免费，并包含众多组件，助您打造精彩的网站。

Argon Dashboard Angular 由 100 多个独立组件构成，让您可以自由选择和组合。所有组件都可以采用不同的颜色，您可以使用 SASS 文件轻松修改。

• 仪表板 Angular Argon
• 仪表板 Angular Argon PRO - 高级版

管理仪表板 - Angular Material

主题提供商——FlatLogic

Angular Material Admin 是一个免费的 Angular 模板，使用 Typescript 构建，并基于 Angular Material 设计。无需 jQuery 和 Bootstrap。使用 Angular，您可以轻松构建响应迅速、加载速度快且导航流畅的应用程序。您可以使用 Angular Material Admin 构建任何 Web 应用程序，例如 SaaS、项目管理工具、CMS、数据可视化应用程序等。

• 管理仪表板 Angular Material - 产品
• 管理仪表板 Angular Material - 演示

基于 Bootstrap 的仪表板

管理仪表板 - 黑色设计

主题提供商 - Creative-Tim

Black Dashboard 是一款精美的 Bootstrap 4 管理仪表板，它拥有大量精心设计的组件，可轻松组合，外观惊艳。如果您正在寻找一款用于管理和可视化业务数据的工具，那么这款仪表板正是您的理想之选。它融合了赏心悦目的色彩、宽敞的卡片、精美的排版和图形。Black
Dashboard 包含您在项目中可能需要的所有插件，并附有入门文档。它轻巧易用，功能强大。

• 管理仪表板黑色

管理仪表板 - Volt Design

主题提供商 - Themesberg

Volt 是一款免费开源的 Bootstrap 5 管理面板，包含 100 多个组件、11 个示例页面和 3 个自定义插件。Volt 无需 jQuery 作为依赖项，这意味着所有库和脚本都无需 jQuery 的支持。

因为它是使用最新版本的 Bootstrap 5 创建的，所以每个组件和元素都基于最新的 Bootstrap 5 Sass 变量和 HTML 标记。

• 管理仪表板 Volt 设计 - 产品
• 管理仪表板 Volt 设计 - 演示

管理仪表板 - CoreUI

主题提供商 - CoreUI

CoreUI 是一个开源 Bootstrap 管理模板。但它并非普通的管理模板。得益于透明的代码和文件结构，它远远超越了以往的管理模板。如果这还不够，CoreUI 还包含一系列独特的功能和超过 1000 个高质量图标。

CoreUI 旨在彻底改变用户体验。它代码纯净透明，去除了冗余组件，因此应用足够轻量，能够提供极致的用户体验。这也意味着移动设备也能像台式机或笔记本电脑一样，轻松直观地导航。

• 管理仪表板 CoreUI - 产品

管理仪表板 - Argon

主题提供商 - Creative-Tim

使用 Bootstrap 4 的 Dashboard 开启您的开发之旅。它开源免费，并包含众多组件，助您打造精彩的网站。Argon
Dashboard 内置超过 100 个独立组件，让您可以自由选择和组合。所有组件均可采用不同的颜色，您可以使用 SASS 文件轻松修改。

• 管理仪表板 Argon
• 管理仪表板 Argon PRO - 高级版

管理仪表板 - Datta Able

主题提供商 - CodeThemes

Datta Able Bootstrap Lite 是市面上所有精简/免费管理模板中最具风格化的 Bootstrap 4 Lite 管理模板。它拥有功能丰富的页面和组件，并完全以开发人员为中心。在开发 Datta Able 之前，我们的重点是性能和设计。在开发过程中，我们进行了各种测试和代码优化，以打造出这款以性能和设计为中心的后端应用程序。

• Datta Able 仪表板- 产品页面
• 仪表板 Datta Able PRO - 高级版本

谢谢！更多资源：

• Admin Dashboards - 一个促进小公司发展的开源项目
• AppSeed 提供更多管理仪表板启动器。

谢谢！顺便说一下，我的昵称是Sm0ke，我在Twitter上也很活跃。