ข้ามไปยังเนื้อหา

State of React 2024

Component Libraries

The building blocks of your front-end

Component Libraries Ratios Over Time

While MUI maintains in top rank in terms of usage, shadcn/ui is making huge gains, doubling from 20% to 42% in a year; as well as topping the positivity chart with 80%!

Ant Design
Chakra UI
Headless UI
MUI
Radix
React Bootstrap
shadcn/ui
React Aria
Mantine

Mode:

View:

การใช้งาน:

สัดส่วนของผู้ตอบที่เคยใช้รายการนี้
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

Number of Items

How many items in this category respondents have used.

0%
6%
11%
17%
23%
28%
1

0

2,232
2

1

1,315
3

2

1,366
4

3

1,125
5

4

804
6

5

498
7

6

280
8

7

130
9

8

78
10

9

42
0%
6%
11%
17%
23%
28%
% ของผู้เข้าร่วมการสำรวจ
2.1
💡
คุณสามารถคลิกที่ชื่อเทคโนโลยีใดๆเพื่อดูรายละเอียดเพิ่มเติมและข้อมูลเชิงลึกเกี่ยวกับข้อมูลที่เกี่ยวข้อง

Other Libraries

What other component libraries have you used?
แบบอิสระ
Multiple
0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
516
7%
We asked members of the React community to share their “pick of the year”

My 2024 Pick: nuqs: Type-safe search params state manager for React

My pick would be François Best and his library nuqs. Recently made available for other React frameworks besides Next.js, it solves many pain points when working with URL search params, and the API is super smooth and easy to use.
We asked members of the React community to share their “pick of the year”

Aurora Scharff

Web developer and consultant at Inmeta

Animation

Motion (previously known as Framer Motion) takes a well-deserved first place to celebrate its recent rebranding!

Which animation libraries have you used?
Multiple
0%
20%
40%
60%
80%
100%
1

2,883
2

1,488
3

1,022
4

927
5

844
6

287
7

8

9

10

🚫 ไม่มี

1,880
11

คำตอบอื่นๆ

97
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
5,971
76%

Data Visualization

Chart.js tops the rankings this year. By the way, did you know that all of this survey's chart are custom-built?

Which data visualization and graphics libraries have you used?
Multiple
0%
20%
40%
60%
80%
100%
1

2,978
2

2,338
3

1,888
4

1,149
5

375
6

302
7

241
8

234
9

194
10

0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
5,906
75%

Form Libraries

React Hook Form is by far the most common form library today. But with the growing popularity of the TanStack, er, stack, it'll be interesting to keep an eye on TanStack Forms in the future.

Which libraries have you used to manage forms?
Multiple
0%
20%
40%
60%
80%
100%
1

4,275
2

2,795
3

670
4

449
5

281
6

154
7

8

33
9

10

11

12

🚫 ไม่มี

961
13

คำตอบอื่นๆ

114
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
6,037
77%

Form Patterns

Interestingly, a majority of developers is comfortable using both controlled and uncontrolled forms.

That being said, if you must pick only one then controlled form inputs seem like the way to go!

Which form pattern do you usually prefer using?
0%
20%
40%
60%
80%
100%
1

Both, depending on the situation

3,103
2

Controlled form components

2,335
3

Uncontrolled form components

606
4

คำตอบอื่นๆ

16
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
6,044
77%

CSS Tools & Libraries

Did Tailwind kill CSS-in-JS? Or did CSS itself simply catch up? In any case the days of getting fancy with CSS architecture seem to be over, as the top three spots are all taken by longstanding CSS tools.

Which libraries or frameworks have you used to style your React apps?
Multiple
0%
20%
40%
60%
80%
100%
1

4,587
2

3,991
3

3,772
4

3,715
5

1,973
6

1,198
7

372
8

220
9

219
10

182
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
6,276
80%

Component Pain Points

What pain points have you encountered related to working with components?
แบบอิสระ
Multiple
0%
20%
40%
60%
80%
100%
1

Styling & customization

2

Form issues

3

Tailwind issues

4

CSS-in-JS

5

MUI issues

6

Performance

7

Excessive complexity

8

Styled Components issues

9

คำตอบอื่นๆ

คำตอบที่ตรงกับ “คำตอบอื่นๆ” 278
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
272
3%

แหล่งข้อมูลที่แนะนำ

Tailwind CSS
Steve Kinney
Temporal

Tailwind CSS

By the end of this course, you'll be proficient in building visually stunning, responsive, and maintainable user interfaces with Tailwind CSS!
Design Systems with Storybook, v2
Steve Kinney
Temporal

Design Systems with Storybook, v2

Create reusable UI components with composable styles and variants using Tailwind CSS. Use MDX for documentation, set up interaction testing, and add data fetching to create a robust dev environment for your component library.
ขอบคุณพันธมิตรของเราที่สนับสนุนเรา! เรียนรู้เพิ่มเติม