跳到内容

UI 库

前端开发的基石

UI 库随时间变化趋势

虽然 MUI(即 Material UI)在作为使用率方面仍排名第一,但 shadcn/ui 增长迅速,即将超越它占据首位。
Ant Design
Chakra UI
Headless UI
MUI
Radix
React Bootstrap
shadcn/ui
React Aria
Mantine
Magic UI
HeroUI (previously NextUI)

模式:

视图:

使用度:

使用过某个项目的受访者比例
0%
20%
40%
60%
80%
100%
2023
2024
2025
0%
20%
40%
60%
80%
100%
很大一部分用户根本不使用任何组件库——而与此同时,那些确实使用组件库的用户可能会尝试多种选择。这表明该领域尚未完全定型,新进入者仍有空间大展拳脚。
0%
7%
13%
20%
27%
33%
01
0
1,246
02
1
473
03
2
523
04
3
501
05
4
370
06
5
260
07
6
171
08
7
121
09
8
44
10
9
34
11
10
7
12
11
10
0%
7%
13%
20%
27%
33%
调查对象百分比
💡
你可以单击任何技术的名称, 来获得额外的详细信息,并更深入地查看其相关数据。
Base UI 是竞争激烈的无头 UI 库领域的另一个进入者——换句话说,这些 UI 库提供组件行为,但将样式留给您自己处理。由于团队中有许多 Radix 的老手,如果您正在寻找这类库,它绝对值得一试。
您还使用了哪些其他组件库?
(自由提问)
多选
0%
20%
40%
60%
80%
100%
02
+5
+9
+4
06
07
-5
-4
-4
11
-4
12
13
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
并非每个项目都需要花哨的动画,但对于那些需要的项目,Motion 已确立自己作为一个重要的选择。
您使用过哪些动画库?
多选
0%
20%
40%
60%
80%
100%
2
+2
741
4
588
5
504
6
365
7
76
8
+2
9
其他答案
33
0%
20%
40%
60%
80%
100%
受访者百分比

数据可视化

尽管不是 React 专用的图表库,Chart.js 仍然在排名中名列前茅。

想猜猜我们在这里看到的图表使用的是什么库吗?是个陷阱题,它们都是从头开始手写的!

您使用过哪些数据可视化和图形库?
多选
0%
20%
40%
60%
80%
100%
1,245
02
1,037
03
969
04
+3
460
+5
207
+5
174
08
-2
154
-2
128
10
-1
120
0%
20%
40%
60%
80%
100%
受访者百分比
没人喜欢处理表单,但当您不得不处理时,React Hook Forms 至少能让整个过程不那么痛苦。
您使用过哪些库来管理表单?
多选
0%
20%
40%
60%
80%
100%
01
1,964
02
1,095
04
+2
355
05
-1
260
06
-1
164
08
-1
62
09
-1
56
10
-1
19
11
其他答案
42
0%
20%
40%
60%
80%
100%
受访者百分比
关于受控与非受控表单组件的争论其实并不存在。受访者主要在两种模式之间切换;但如果非要选一个,受控表单是明显的赢家。
您通常更喜欢使用哪种表单模式?
0%
20%
40%
60%
80%
100%
1
两者皆有,视情况而定
1,423
2
受控表单组件
1,024
3
非受控表单组件
200
4
其他答案
8
0%
20%
40%
60%
80%
100%
受访者百分比

CSS 工具和库

CSS-in-JS 曾风光一时,但 Tailwind 的出现,以及过去几年 CSS 本身的巨大改进,对其受欢迎程度造成了巨大打击。
您使用过哪些库或框架来为您的 React 应用设置样式?
多选
0%
20%
40%
60%
80%
100%
01
2,142
02
1,794
03
1,607
04
1,594
05
786
06
467
07
+4
329
08
-1
199
-1
103
10
-1
102
0%
20%
40%
60%
80%
100%
受访者百分比
开发者似乎对 Tailwind 爱恨交加,一些人将其视为痛点,而另一些人则将其视为解决 UI 麻烦的答案。
您在使用组件时遇到了哪些痛点?
(自由提问)
多选
0%
20%
40%
60%
80%
100%
1
Styling & customization
2
3
React issues
4
CSS-in-JS issues
+1
5
Form issues
-3
6
Excessive complexity
+1
7
Breaking changes
8
Bloat
+9
9
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
Enterprise UI Development: Testing & Code Quality
Steve Kinney
Temporal

Enterprise UI Development: Testing & Code Quality

Learn unit testing with Vitest, continuous integration via GitHub Actions, component and accessibility testing with Axe, mocking techniques, and code standard enforcement using ESLint and Husky & Lint-Staged.
The Hard Parts of UI Development
Will Sentance
Codesmith

The Hard Parts of UI Development

Develop an under-the-hood knowledge of UI dev by learning techniques such as data binding, UI composition, templating, virtual DOM and its reconciliation, and hooks, all from scratch!
感谢合作伙伴对我们的支持! 了解更多。