db906fd85a
- Replace .eslintrc.cjs with eslint.config.mjs (ESLint 9 flat config)
using direct eslint-plugin-solid + @typescript-eslint/parser approach
- Add @typescript-eslint/parser to root devDependencies
- Add main/module/types top-level fields to packages/core/package.json
- Add resolve.conditions to packages/core/vite.config.ts
- Create packages/core/tsconfig.test.json for test type-checking
- Remove empty paths:{} from packages/core/tsconfig.json
12 KiB
English
UI Libraries
The building blocks of your front-end
Link to section UI Libraries Ratios Over Time
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.
All Respondents
Query Builder…
Ant Design
Chakra UI
Headless UI
MUI
Radix
React Bootstrap
shadcn/ui
React Aria
Mantine
Magic UI
HeroUI (previously NextUI)
Mode:
ValueRank
View:
UsageAwarenessInterestSatisfactionAppreciationPositivity
Usage:
Proportion of respondents having used an item
0%
20%
40%
60%
80%
100%
2023
2024
2025
27%25%28%22%20%21%22%21%22%56%56%56%25%36%47%32%30%30%20%42%56%10%16%20%11%13%3%6%
0%
20%
40%
60%
80%
100%
Share Chart…Export Data…
Link to section Number of Items
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.
All Respondents
Query Builder…
0%
7%
13%
20%
27%
33%
Average: 2.3
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%
% of survey respondents
2.3
Share Chart…Export Data…
💡
You can click on any technology name to get extra details and a more in-depth look at its related data.
Link to section Other UI Libraries
Comments for “Other UI Libraries” 2
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.
What other component libraries have you used?
Freeform
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
01
Answers matching “Base UI” 49
02
daisyUI
Answers matching “daisyUI” 19
03
+5
Answers matching “Fluent UI” 9
04
+9
Answers matching “Ark UI” 9
05
+4
Answers matching “PrimeReact” 8
06
Material UI
Answers matching “Material UI” 8
07
Tailwind CSS
-5
Answers matching “Tailwind CSS” 7
08
Answers matching “shadcn/ui” 7
09
-4
Answers matching “Ariakit” 7
10
-4
Answers matching “Tamagui” 6
11
Semantic UI/Fomantic UI
-4
Answers matching “Semantic UI/Fomantic UI” 6
12
Styled Components
Answers matching “Styled Components” 5
13
Other Answers
Answers matching “Other Answers” 140
0%
20%
40%
60%
80%
100%
% of question respondents
221
6%
5
Share Chart…Export Data…
Link to section Animation
Comments for “Animation” 2
Not every project needs fancy animations, but for those who do Motion has established itself as a serious option.
Which animation libraries have you used?
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
1
1,443
2
🚫 None
+2
741
3
631
4
GSAP
588
5
React Motion
504
6
React Native Reanimated
365
7
AutoAnimate
76
8
Anime.js
+2
Answers matching “Anime.js” 10
9
Other Answers
33
0%
20%
40%
60%
80%
100%
% of question respondents
2,631
70%
10
Share Chart…Export Data…
Link to section Data Visualization
Comments for “Data Visualization” 4
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!
Which data visualization and graphics libraries have you used?
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
01
1,245
02
D3
1,037
03
Recharts
969
04
🚫 None
+3
460
05
437
06
+5
207
07
+5
174
08
Nivo
-2
154
09
-2
128
10
Visx
-1
120
Show All (5 hidden)
0%
20%
40%
60%
80%
100%
% of question respondents
2,583
69%
10
Share Chart…Export Data…
Link to section Form Libraries
Comments for “Form Libraries” 11
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.
Which libraries have you used to manage forms?
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
01
React Hook Form
1,964
02
Formik
1,095
03
+8
567
04
🚫 None
+2
355
05
Redux Form
-1
260
06
React Final Form
-1
164
07
-1
122
08
react-jsonschema-form
-1
62
09
Conform
-1
56
10
@formily/core
-1
19
11
Other Answers
42
0%
20%
40%
60%
80%
100%
% of question respondents
2,643
70%
10
Share Chart…Export Data…
Link to section Form Patterns
Comments for “Form Patterns” 7
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.
Which form pattern do you usually prefer using?
All Respondents
Query Builder…
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
Other Answers
8
0%
20%
40%
60%
80%
100%
% of question respondents
2,647
70%
10
Share Chart…Export Data…
Link to section CSS Tools & Libraries
Comments for “CSS Tools & Libraries” 8
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.
Which libraries or frameworks have you used to style your React apps?
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
01
Tailwind CSS
2,142
02
CSS Modules
1,794
03
Sass/SCSS
1,607
04
Styled Components
1,594
05
Emotion
786
06
Styled JSX
467
07
Less
+4
329
08
vanilla-extract
-1
199
09
-1
103
10
Stitches
-1
102
Show All (5 hidden)
0%
20%
40%
60%
80%
100%
% of question respondents
2,740
73%
10
Share Chart…Export Data…
Link to section Component Pain Points
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.
What pain points have you encountered related to working with components?
Freeform
Multiple
All Respondents
Query Builder…
0%
20%
40%
60%
80%
100%
1
Styling & customization
Answers matching “Styling & customization” 34
2
Tailwind CSS
Answers matching “Tailwind CSS” 17
3
React issues
Answers matching “React issues” 13
4
CSS-in-JS issues
+1
Answers matching “CSS-in-JS issues” 13
5
Form issues
-3
Answers matching “Form issues” 9
6
Excessive complexity
+1
Answers matching “Excessive complexity” 6
7
Breaking changes
Answers matching “Breaking changes” 5
8
Bloat
+9
Answers matching “Bloat” 5
9
Other Answers
Answers matching “Other Answers” 105
0%
20%
40%
60%
80%
100%
% of question respondents
115
3%
5
Share Chart…Export Data…
Link to section Recommended Resources
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.
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!
Sponsored content from our partners. Learn more.