✨25+ 顶级 React UI 组件库 [2021]

• React是一个开源 JavaScript 库，可帮助您构建 Web 和移动应用程序的顶层界面。它可以与其他 JavaScript 框架和库高效集成。

• 现在是 2021 年，React.js 是世界上最受欢迎的 Javascript Web 前端库。

🤔 React UI 组件库如何工作？

• React拥有日益丰富的支持库，尤其是 UI 组件库。这些库在构建美观、现代化的 React 应用时，为我们节省了大量时间和精力。它们提供了许多开箱即用的组件，例如图标集、按钮、日期时间选择器、表单输入、日历、菜单、分页、卡片等等。

本文将介绍一些最流行的 React UI 库，它们将在你的下一个项目中助你一臂之力。如果觉得这篇文章有用，别忘了点赞哦。

让我们看看...👻

1.Reakit

• Reakit是一个低级组件库，用于使用 React 构建可访问的高级 UI 库、设计系统和应用程序。
• Reakit 核心库中的组件默认无样式。每个组件返回一个 HTML 元素，该元素接受所有 HTML 属性，包括 className 和 style。

2. Reactjs-弹出窗口

• Reactjs-popup是一个简单的 React 弹出组件，可帮助您为下一个 React App 创建简单和复杂的模态框、工具提示和菜单。
• 作为子模式运行，以在代码中的任何位置控制弹出窗口💪。

3. 基础网站

• Base Web是启动、发展和统一 Web 应用程序的基础。
• 它是一个与基础设计系统相一致的 React 组件和实用程序的开源工具包——本质上，设计转化为代码。

4.主题UI

• 主题 UI是一个基于约束的设计原则创建可主题化的用户界面的库。
• 使用灵活的 API 构建自定义组件库、设计系统、Web 应用程序、Gatsby 主题等，以实现一流的开发人员人体工程学。

5. 金翅雀

• Mantine是一个功能齐全的 React 组件和钩子库。
• 轻松构建功能齐全的可访问 Web 应用程序 - Mantine 包含 100 多个可定制的组件和挂钩，可在任何情况下为您提供保护。

6. Geist UI

• Geist UI是源自 Vercel 设计的样式的 React 实现。
• Geist UI 是一个用于构建现代网站和应用程序的开源设计系统。

7. 到达用户界面

• Reach UI致力于成为基于 React 的设计系统的可访问基础。
• 每个组件都经过 Safari + VoiceOver、Firefox + NVDA 和 Edge + JAWS 测试。随着项目的成熟，我们将通过 WebAIM 进行审核，以确保如果您选择 Reach UI，您的应用将拥有坚实且易于访问的基础。

8.流畅的用户界面

• Fluent UI来自微软，不仅可以作为 React 包使用，还可以作为 iOS、macOS、Android 和 Windows 的 Web 组件和本机库使用。
• 它具有用于构建表单和列表的组件，但也提供了非常具体的组件，例如PeoplePicker。

9. 无头用户界面

• Headless UI是一组完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。

10.弹性UI

• Elastic UI框架是 React UI 组件的集合，用于在 Elastic 快速构建用户界面。
• 它分发 UI React 组件和静态资产以用于构建 Web 布局。

11. React Admin

• React Admin UI 组件框架适用于在 REST/GraphQL API 之上构建企业对企业 (B2B) 管理应用程序，并且可通过设计进行定制。
• 除了 React 之外，它还基于许多知名项目构建：Material UI、React Router、Redux 和 React Final Form。后者是一种流行的表单状态管理解决方案。

12. React 工具箱

• React Toolbox UI 组件库，您可以使用它在项目中实现 Google 的材料设计原则。
• React Toolbox 为访问者提供了一个浏览器内编辑器，您可以在其中实时试验组件。

13. React 桌面

• React Desktop使用 macOS、Sierra 和 Windows 10 组件，旨在为网络带来原生桌面体验。
• 该集合是一个基于 Facebook 的 React 库构建的 JavaScript 库，它与任何基于 JavaScript 的项目兼容。

14. Reactstrap

• Reactstrap有两个主要发行版本。一个是基础版本，它不包含可选依赖项。这让你在配置所需的依赖项时更加灵活。
• 第二个版本是完整版，包含所有可选依赖项。建议用于较小的应用程序。

15. React虚拟化

• 该库中的React Virtualized包含许多用于高效渲染大型列表、表格和网格的组件。
• 例如，您会发现砖石、柱子、自动调整器、方向排序器、窗口滚动器等等。

16.碎片反应

• Shards React是一个开源的现代 React UI 套件，它是从头开始构建的，旨在实现快速性能。
• 该组件库基于 Shards，使用了 React Datepicker、React Popper（定位引擎）和 noUIShlider，支持 Material 和 Fontawesome 图标。

17. React 套件

• React Suite包含一系列适用于企业系统产品的组件库，支持所有主流浏览器和平台以及服务器端渲染。
• 该库中的组件包括图标、加载器、分隔符、工具提示等。

18. PrimeReact

• PrimeReact提供的组件几乎可以满足所有基本界面需求，例如输入选项、菜单、数据呈现、消息等。
• 它也注重移动体验，并采用针对触控优化的响应式设计元素。它提供大量模板和主题，方便用户自定义，并在扁平化设计和 Material Design 之间进行选择。

19. React Bootstrap

• React Bootstrap是一个保留了 Bootstrap 核心的 UI 工具包。
• 为了让您更好地控制每个组件的形式和功能，它用 React 替换了 Bootstrap 的 JavaScript。
• 每个组件都构建得易于访问，这对于前端框架构建很重要。

20. React 的 Ant Design

• Ant Design for React这个UI库是一个针对企业级产品的设计系统。
• 它基于 Ant Design 项目，包含一组用于构建丰富、交互式 UI 的高质量组件和演示。

21.Material-UI

• Material-UI是最受欢迎的 React UI 组件库之一。
• 有各种有用的组件可用，如应用栏、自动完成、徽章、按钮、卡片、对话框、图标、菜单、滑块等。

22.故事书

• Storybook已经流行了一段时间了。它本身并不是一个组件库，而是一个用于独立开发 React UI 组件的开源工具。

23.蓝图

• 蓝图主要用于桌面应用程序。
• 这些组件特别适合构建复杂且数据密集的界面。

24. 索环

• Grommet的套件中拥有丰富的组件库，其用户包括 Netflix 和波音等大公司。
• 无论您的应用程序是用于手机还是用于更宽的屏幕显示，您都能够设计布局。

25. 常青

• Evergreen包含一组适用于企业级 Web 应用程序的 React 组件。
• 它包括各种各样的组件和工具，从基本布局、排版、颜色和图标到基于功能的组件，例如下拉菜单、切换按钮、文件上传和反馈指示器。

26. 语义 UI React

• Semantic UI使用人性化的 HTML 作为其开发框架，并与 React、Angular、Meteor、Ember 和许多其他框架集成。
• 它允许您在 Semantic UI React 应用程序上加载任何 Semantic UI CSS 主题。

27. Argon 设计系统 React

• Argon 设计系统 React库为 Bootstrap 4、React 和 Reactstrap 提供免费的设计系统。
• Argon 设计系统提供了预先构建的示例页面以及所有组件（如颜色、样式、悬停和焦点）的少量变体。

28. 重低音

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

29. 阿尔维斯

• Arwes看起来真的很酷。它是一个科幻风格的 UI 库，甚至还为你的交互提供了嘟嘟声。
• 它的组件具有非常精美的动画效果和超级独特的宇宙飞船外观。

结论👋。

这些只是我在 GitHub 上研究时发现的一些库，但我相信还有很多非常好但不太流行的库。我仍然不确定哪个库最适合我们的项目，但我倾向于使用 Mantine。

🙏 请在评论部分分享您宝贵的反馈，您最喜欢的库是哪个，以及您每天使用哪个库来改善您的 UI 和生产力。

😎 保留声明并进行编码！