记录基于 React 的常用 UI 架构

排序依照 github 上的 star 数量（截至2024.08.08）

1、bootstrap（168k）

Github: https://github.com/twbs/bootstrap

官网：https://getbootstrap.com/

最近更新时间：昨天

issue：437

图标数：2000+

核心功能：

• 提供预定义的CSS类和组件，帮助快速搭建响应式布局和界面。

优缺点：

• 优点：易上手，兼容性好，适合快速开发。
• 缺点：样式相似，设计较为传统，定制能力有限。

2、material-ui（92.9k）

Github: https://github.com/mui/material-ui

官网：Material UI: React components that implement Material Design

最近更新时间：1h前

issue：1.7k（过大，基本不考虑）

核心功能：

• 遵循Google的Material Design规范，提供丰富的React组件库，专注于现代和一致性的UI设计。

优缺点：

• 优点：现代化设计，组件丰富，强大的定制能力。
• 缺点：学习曲线陡峭，性能优化要求高。

3、ant design（91.5k）

Github: https://github.com/ant-design/ant-design

官网：Ant Design - 一套企业级 UI 设计语言和 React 组件库

最近更新时间：1h前

issue：1.1k

核心功能：

• 企业级设计系统和组件库，专为复杂的业务应用设计，特别适合React生态。

优缺点：

• 优点：丰富的组件和设计系统，国际化支持，适合企业级应用。
• 缺点：体积大，学习成本高，定制难度较高。

4、storybook（83.7k）

Github: https://github.com/storybookjs/storybook

官网：Storybook: Frontend workshop for UI development

最近更新时间：17h前

issue：1.8k（基本不考虑）

核心功能：

• 并非UI框架，而是一个UI组件开发工具。它允许开发者在独立环境下开发、测试和展示UI组件。

优缺点：

• 优点：组件隔离开发和测试，支持多种框架（React, Vue, Angular等），良好的文档和自动化生成能力，促进团队协作和组件复用。
• 缺点：并不提供UI组件，需要与其他框架结合使用，学习曲线主要在配置和集成上。

5、element（54.1k）

Github: https://github.com/ElemeFE/element

官网：Element - The world's most popular Vue UI framework

最近更新时间：5个月前

issue：2.5k（基本不考虑）

6、semantic-ui（51.1k）

Github: https://github.com/Semantic-Org/Semantic-UI

官网：https://semantic-ui.com/

最近更新时间：去年（基本不考虑）

issue：964

7、chakra-ui（31.7k）

Github: https://github.com/chakra-ui/chakra-ui

官网：Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications. - Chakra UI

最近更新时间：14h以前

issue：278

组件：无左侧导航（基本不考虑）

8、mantine（25.7k）

Github: https://github.com/mantinedev/mantine

官网：Mantine UI

最近更新时间：6h以前

issue：16

9、blueprint（20.6k）

Github: https://github.com/palantir/blueprint

官网：Blueprint – A React-based UI toolkit for the web

最近更新时间：2天以前

issue：680

组件：无左侧导航栏功能（不考虑）

核心功能：

• Blueprint 是一个为 React 设计的 UI 组件库，专注于构建复杂的、数据密集型的桌面应用程序。它最初由 Palantir Technologies 开发，旨在为开发者提供一套功能强大、设计一致的工具，用于构建现代的、响应式的企业级应用界面。

优缺点：

• 优点：适合复杂应用、丰富的组件和功能、一致性和美观、强大的文档支持、TypeScript 支持
• 缺点：学习曲线较陡、重量级、风格限制、主要面向桌面应用。

适用场景

• 企业级应用
• 数据密集型应用
• 需要一致性和高效开发的团队

10、grommet（8.3k）

Github: https://github.com/grommet/grommet

官网：Grommet

最近更新时间：3天以前

issue：287

核心功能：

• Grommet 是一个用于构建响应式和可访问的用户界面的 React 组件库。它专注于提供现代化的、可扩展的设计系统，并且特别适合创建企业级应用程序和复杂的用户界面。Grommet 的设计强调用户体验，易于定制和集成。

优缺点：

• 优点：现代化和响应式设计、无障碍设计支持、主题和样式定制、丰富的组件库、详细的文档和社区支持。
• 缺点：学习曲线较陡、包体积、定制复杂性、社区和生态系统相对较小。

适用场景

• 企业级应用
• 需要响应式和无障碍设计的项目
• 品牌定制化项目

11、rebass（7.9k）

Github: https://github.com/rebassjs/rebass

官网：https://rebass-v3.vercel.app/

最近更新时间：3年以前（基本不考虑）

issue：46

核心功能：

• Rebass 是一个轻量级且高度可定制的 React UI 组件库，专注于简洁、灵活和无样式（unstyled）的设计哲学。它主要旨在通过一组基础组件和设计系统工具，帮助开发者快速构建一致的、响应式的用户界面。

优缺点：

• 优点：高度可定制、轻量级、设计系统友好、响应式设计方便、简洁的 API
• 缺点：功能相对基础、样式需要自行管理、生态系统较小、学习曲线取决于设计系统

适用场景

• 小型或中型项目
• 需要高度定制化的项目
• 设计系统驱动的开发