Перейти до вмісту

UI-бібліотеки

Елементи для побудови вашого застосунку

Співвідношення UI-бібліотек із часом

While MUI (a.k.a. Material UI) is still number one in terms of usage, shadcn/ui is growing fast and on the verge of overtaking it for the top spot.
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%

Кількість опцій

A big proportion of users don't use any component library at all–while at the same time, those who do use one are likely to have tried out multiple options. This suggests the space isn't quite settled yet, and that there's still room for new entrants to make their mark.
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%
% від усіх опитаних
💡
Ви можете натиснути на назву будь-якої технології, щоб отримати більше деталей та вичерпніший погляд на відповідні дані.

Інші UI-бібліотеки

Base UI is another entrant in the very competitive space of headless UI libraries–in other words UI libraries that provide component behavior, but leave styling up to you. And with many Radix veterans as part of the team, it's definitely worth checking out if that's what you're after.
Які ще бібліотеки компонентів ви використовували?
Довільна форма
Множинний вибір
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%
% від тих, хто відповів на питання
Not every project needs fancy animations, but for those who do Motion has established itself as a serious option.
Які бібліотеки ви використовували для роботи з анімаціями?
Множинний вибір
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%
% від тих, хто відповів на питання

Візуалізація даних

Despite not being a React-specific chart library, Chart.js still tops the rankings.

Want to guess what library we use for the charts you see here? Trick question, they're all hand-coded from scratch!

Які бібліотеки ви використовували для візуалізації даних та роботи з графікою?
Множинний вибір
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%
% від тих, хто відповів на питання

Бібліотеки для форм

Nobody likes dealing with forms, but when you can't help it React Hook Forms at least makes the whole thing a lot less painful.
Які бібліотеки ви використовували для роботи з формами?
Множинний вибір
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%
% від тих, хто відповів на питання
The debate between controlled and uncontrolled form components isn't really one. Respondents mainly switch between either pattern; but if they need to pick then controlled forms are the clear winner.
Який патерн форм ви зазвичай волієте використовувати?
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 had its 15 minutes of fame, but the appearance of Tailwind, as well as the huge improvements in CSS itself in the last couple years, have put a big dent in its popularity.
Які бібліотеки або фреймворки ви використовували для стилізації ваших 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%
% від тих, хто відповів на питання

Проблеми у роботі з компонентами

Developers seem to have a love/hate relationship with Tailwind, with some citing it as a pain point while others see it as the answer to their UI troubles.
З якими проблемами ви стикалися під час роботи з компонентами?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1
Стилізація та кастомізація
2
3
React issues
4
CSS-in-JS issues
+1
5
Проблеми форм
-3
6
Надмірна складність
+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!
Спонсорований вміст від наших партнерів. Детальніше.