メインコンテンツにスキップ

UI Libraries

The building blocks of your front-end

UI Libraries Ratios Over Time

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)

モード:

表示:

利用率:

Proportion of respondents having used an item
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%
%の質問回答数
💡
技術名をクリックすると、その技術の詳細や、より細かい関連データを見られます。

Other UI Libraries

Base UIは、非常に競争の激しいヘッドレスUIライブラリ分野への新たな参入者です。ヘッドレスUIとは、コンポーネントの挙動のみを提供し、スタイリングについては開発者に委ねるライブラリのことです。そして、開発チームには多くのRadixのベテランがいるため、この種のライブラリを求めているのであれば間違いなくチェックする価値があります。
What other component libraries have you used?
Freeform
Multiple
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は有力な選択肢として確立されています。
Which animation libraries have you used?
Multiple
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%
回答数に占める割合(%)

Data Visualization

React専用のチャートライブラリではないにもかかわらず、Chart.jsは依然としてランキングのトップにいます。

ここにあるチャートに何のライブラリを使っているか、当ててみますか?実はこれ、ひっかけ問題なんです。全部一から手でコーディングして作ったものなんですよ!

Which data visualization and graphics libraries have you used?
Multiple
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を使うことで苦痛をはるかにやわらげてくれます。
Which libraries have you used to manage forms?
Multiple
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%
回答数に占める割合(%)
制御されたフォームコンポーネントと制御されていないフォームコンポーネントをめぐる議論は、実際には議論にすらなっていません。多くの回答者は状況に応じて両方のパターンを使い分けていますが、選択する必要がある場合、制御されたフォームの方が圧倒的に支持されています。
Which form pattern do you usually prefer using?
0%
20%
40%
60%
80%
100%
1
Both, depending on the situation
1,423
2
Controlled form components
1,024
3
Uncontrolled form components
200
4
その他の回答
8
0%
20%
40%
60%
80%
100%
回答数に占める割合(%)

CSS Tools & Libraries

CSS-in-JSは15分間は世界的な有名人でしたが、Tailwindの登場と、ここ数年でのCSS自体の大幅な改善により、その人気に大きな打撃を与えました。
Which libraries or frameworks have you used to style your React apps?
Multiple
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%
回答数に占める割合(%)

Component Pain Points

開発者はTailwindと愛憎の関係にあるようで、一部の人はそれを問題点として挙げている一方で、UI開発の悩みを一掃してくれる救世主だと考える人もいます。
What pain points have you encountered related to working with components?
Freeform
Multiple
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!
パートナーのサポートに感謝しています! 詳細をみる。