2020 年 20 多个最佳 React UI 组件库/框架

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

React 是一个开源的 JavaScript 库，可以帮助你构建出色的 Web 和移动应用界面。它能够便捷地与其他 JavaScript 框架和库集成，并包含称为组件的小型独立代码块。在这份最佳 React UI 组件库和框架列表中，我们将重点介绍这些组件。

组件的优点在于其模块化设计，几乎没有应用特定的依赖项。这意味着您可以重用这些组件，从而快速构建出色的应用和界面。而且，借助Bit，您还可以与其他 React 爱好者分享这些组件。

在您开始使用 React 进行下一个项目之前，请花几分钟时间浏览这份最佳 React UI 组件库列表，它们可以帮助您创建外观精美的 UI。

2020 年最佳 React UI 组件库和框架

Material Kit React

Material Kit React 的设计灵感源自 Google 的 Material Design，它构建了一系列以一致性为核心特性的元素。这样，您的 Web 项目就能在整个过程中保持外观和功能的一致性。

整体布局类似于多张纸，这赋予了版面一种层次感和秩序感。套件包含三个示例页面，这些页面不仅展示了该套件的功能，还可以作为模板，供您替换文本和图片。

该工具包还包含许多基本元素，例如按钮、徽章、滑块、菜单、分页、导航栏、标签页和胶囊式窗口。您可以自定义大多数元素的样式、大小和颜色。JavaScript 元素包括模态框、工具提示、日期时间选择器、轮播图和弹出框。除了使用该工具包创建新项目外，您还可以重新设计任何现有的 Bootstrap 项目。专业版包含更多组件、模块和示例页面。

碎片反应

Shards React 是一个开源的、现代化的 React UI 工具包，它从零开始构建，旨在实现快速性能。其现代化的设计系统允许您修改许多内容。此外，您还可以下载源文件，在代码级别进行修改。用于样式化的 SCSS 进一步提升了开发者的体验。

这个库基于Shards，并使用了React Datepicker、React Popper（一个定位引擎）和noUIShlider。它支持 Material Design 和 Fontawesome 图标。Shards Pro 包包含 15 个预制页面，可帮助您快速上手。这些页面使用可移动的模块，非常方便。

Shards React 在GitHub上拥有约 270 个 star ，还包含数十个自定义组件，例如范围滑块和切换输入框。超过 350 个组件确保您可以使用 Shards React 构建几乎所有类型的网站。

Material-UI

Material-UI 在GitHub上拥有近 4.5 万颗星，是目前最受欢迎的 React UI 组件库之一。这些组件基于 React，但采用了 Google 的 Material Design 设计规范。Material Design 的设计灵感来源于现实世界和纹理，同时尽可能地简化 UI 元素。

Material-UI 提供了丰富的实用组件，例如应用栏、自动完成功能、徽章、按钮、卡片、对话框、图标、菜单、滑块等等。此外，Material-UI 还提供了React 主题和模板，方便您为应用自定义颜色主题。

React Bootstrap

接下来要介绍的是 React Bootstrap，这是一个保留了 Bootstrap 核心的 UI 工具包。为了让用户更好地控制每个组件的形式和功能，它用 React 替换了 Bootstrap 的 JavaScript 代码。每个组件都设计得易于访问，这对于前端框架的构建至关重要。

由于 React Bootstrap 与 Bootstrap 的起源并没有太大区别，开发者可以从数千个现成的Bootstrap 主题中进行选择。它在GitHub上获得了超过 14500 个 star 。

React 虚拟化

正在构建数据密集型前端？React Virtualized 或许正是您需要的库。它包含众多组件，可高效渲染大型列表、表格和网格。例如，您可以找到瀑布流布局、列布局、自动调整大小组件、方向排序器、窗口滚动条等等。此外，您还可以通过配置行高来自定义表格，并在单元格中显示占位符。

此外，React Virtualized 依赖项极少，并支持标准浏览器，包括最新的 iOS 和 Android 移动浏览器。它在GitHub上拥有超过 14,000 个 star 。

Argon 设计系统 React

这个库为 Bootstrap 4、React 和 Reactstrap 提供了一个免费的设计系统。它包含 100 个现代且精美的元素，这些元素都以功能齐全的代码形式实现，因此您可以轻松地在页面和实际网站之间切换。

Argon 设计系统提供预构建的示例页面，以及所有组件（如颜色、样式、悬停和焦点）的一些变体。

抢先预览所有组件，包括基本元素、排版、导航栏、警报、图像、图标、Javascript 组件等等。

蓝图

Blueprint 中的 React 组件主要用于桌面应用程序。这些组件尤其适合构建复杂且数据密集的界面。您可以从组件库中获取用于生成和显示图标、处理日期和时间、选择时区等功能的代码片段。

这个组件库还包含哪些内容？非常丰富——面包屑导航、按钮、标注、卡片、分隔线、导航栏、标签页、标签等等。它在GitHub上获得了超过 13,000 个 star。

Semantic UI React

Semantic UI 使用对用户友好的 HTML 作为其开发框架，并集成了 React、Angular、Meteor、Ember 和许多其他框架。所有 jQuery 功能都已用 React 重新实现。

它允许你将任何 Semantic UI CSS 主题加载到你的 Semantic UI React 应用之上。更重要的是，你还可以完全访问标记，这意味着你可以灵活地自定义组件。它在GitHub上的 star 数接近 9000。

React 工具箱

另一个可用于在项目中实现 Google Material Design 原则的 React UI 组件库是 React Toolbox。React Toolbox 依赖于CSS Modules来实现这一目标。虽然您可以使用任何模块打包工具，但它与webpack工作流程完美集成。React Toolbox 团队贴心地为用户提供了一个浏览器内编辑器，方便您实时体验组件。

在使用 React Toolbox 时，您可以选择导入组件包或原始组件。区别在于，前者会预先注入所有必要的依赖项和主题。这意味着每个依赖项的 CSS 都会自动包含在最终的 CSS 中。相反，原始组件不包含任何 CSS。这意味着您需要通过属性为组件指定主题才能正确设置样式。React Toolbox 在GitHub上的贡献值已接近 8,500 。

React Desktop

我们的下一个组件库 React Desktop 使用 macOS、Sierra 和 Windows 10 组件，旨在为 Web 带来原生桌面体验。

这个库是一个基于Facebook React库构建的 JavaScript 库，兼容任何基于 JavaScript 的项目。该工具在GitHub上的评分已超过 8000 星。

温泉用户界面

如果您热衷于开发跨平台移动应用，那么您一定会对我们推荐的 React UI 组件库列表中的这款产品感兴趣。Onsen UI 是一个移动应用开发框架，它使用 HTML5 和 JavaScript，并可与 Angular、Vue.js 和 React 集成。所有组件都会根据平台自动设置样式，因此它可以使用同一套源代码同时支持 iOS 和 Android。

Onsen UI 与许多流行的框架兼容。交互式教程可帮助您快速上手。组件库采用纯 CSS，不涉及任何 JavaScript 行为。自定义元素可提供更多细节。在GitHub上的星标数已超过 7000。

常绿

Evergreen 包含一套适用于企业级 Web 应用程序的 React 组件。由于它使用了React Primitive，因此具有很高的灵活性。同时，它也开箱即用，非常方便。

它包含种类繁多的组件和工具，从基本的布局、字体、颜色和图标，到下拉菜单、切换开关、文件上传和反馈指示器等功能性组件，应有尽有。安装 Evergreen 软件包后，您可以选择要导入的组件。它在GitHub上获得了超过 7000 个星标。

Reactstrap

对于简单的 React Bootstrap 4 组件，可以试试 Reactstrap。它提供两个主要版本。其中一个是基础版本，不包含可选依赖项。这样，您可以更灵活地配置所需的依赖项。

第二个版本是完整版，包含了所有可选依赖项。建议小型应用程序使用此版本。Reactstrap 是 React UI 组件库中的另一个集合，在GitHub上的 star 数已超过 7000 。

雷巴斯

Rebass 仅包含八个基础组件，全部打包在一个超小的文件中。这些组件可扩展、可定制主题，并且专为响应式网页设计而构建。

这些组件使用 styled-system，是扩展应用自定义 UI 组件的绝佳起点。ThemeProvider 也能在这方面提供帮助。该项目在GitHub上的星标数已接近 5000。

垫圈

Grommet 拥有丰富的组件库，其用户包括 Netflix 和波音等知名企业。无论您的应用是面向手机还是大屏幕显示器，您都可以设计布局。辅助功能支持键盘和屏幕阅读器。

主题工具可以帮助用户自定义颜色、字体和布局。这个 React UI 组件库在GitHub上的星标数超过 4000 。

Elemental UI

Elemental UI 提供了一系列基本功能组件，既可单独使用，也可任意组合使用，无论采用默认样式还是主题化后的效果。这些组件包括表单、按钮、卡片和模态框。

该项目仍在开发中，但在Github上已获得 4000 多个星级评分。

RSUITE

RSUITE包含一系列用于企业系统产品的组件库。它支持所有主流浏览器和平台，以及服务器端渲染。

如果您熟悉 Less 开发，那么自定义组件应该不成问题。此库中的组件包括图标、加载器、分隔线、工具提示等等，RSUITE 在GitHub上拥有近 2500 个星标。

美女

在众多优秀的 React UI 组件库中，Belle 提供了种类繁多的组件。您可以从两个层面自定义这些组件：对所有组件进行整体的基础自定义，以及对每个组件进行单独自定义。

这些组件支持移动设备和 ARIA 格式。使用 Belle 的方法是先用 React 创建一个简单的应用程序，然后导入任何 Belle 组件即可立即使用。该组件库在GitHub上拥有超过 2300 个 star 。

React-md

如果您想在项目中实现 Material Design，React-md 是另一个值得考虑的 React UI 组件库。它提供了一系列可与 Sass 配合使用的 React 组件。为此，它采用了 Sass 样式分离而非内联样式的方式。这使得您可以更轻松地根据现有样式自定义组件。

颜色和字体均可自定义，详细的文档将帮助您快速上手。在GitHub上，React-md 已获得近 2000 个 star。

PrimeReact

如果没有 PrimeReact，这份 React UI 组件库列表就不完整。它提供的组件几乎涵盖了所有基本的界面需求，例如输入选项、菜单、数据展示、消息等等。

它也十分注重移动端体验，采用了触控优化的响应式设计元素。此外，还有许多模板和主题可供选择，方便用户自定义，并可在扁平化设计和 Material Design 之间自由切换。该组件库在GitHub上的 star 数已接近 800 。

KendoReact

与前面提到的 React UI 组件库不同，KendoReact 是一套高级组件，授权价格从 799 美元起。它拥有包括微软、NASA 和索尼在内的众多知名客户。您也可以使用它来创建快速、功能丰富且用户界面精美的应用程序。

这套组件专为 React 开发而构建。这确保了零依赖性，并且所有组件都针对 React 进行了全面优化。此外，如果您已有组件库，可以直接从 KendoReact 添加组件，而无需重写整个库。