콘텐츠로 건너뛰기

State of React 2024

컴포넌트 라이브러리

프론트엔드를 구성하는 기본 요소

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%
💡
기술 이름을 클릭하면 자세한 정보를 확인하고 관련 데이터를 자세히 볼 수 있습니다.

기타 라이브러리

0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% of question respondents
516
7%
그 외에 어떤 컴포넌트 라이브러리를 사용해 봤나요?
(자유 형식 질문)
We asked members of the React community to share their “pick of the year”

My 2024 Pick: "Mind the Gap" – Ryan Florence's talk at Big Sky Dev Con 2024

Ryan masterfully shows how React's new "use server" and "use client" directives let us build rich features on both sides of the network, using the same unified paradigm. A must-watch for any React developer.
We asked members of the React community to share their “pick of the year”

Sam Selikoff

Videos for frontend developers on Build UI and YouTube, co-host of the Frontend First podcast

Animation

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

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

Other Answers

97
0%
20%
40%
60%
80%
100%
% of question respondents
5,971
76%
Which animation libraries have you used?

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?

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%
% of question respondents
5,906
75%
Which data visualization and graphics libraries have you used?

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.

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

Other Answers

114
0%
20%
40%
60%
80%
100%
% of question respondents
6,037
77%
Which libraries have you used to manage forms?

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!

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

Other Answers

16
0%
20%
40%
60%
80%
100%
% of question respondents
6,044
77%
Which form pattern do you usually prefer using?

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.

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%
% of question respondents
6,276
80%
Which libraries or frameworks have you used to style your React apps?

컴포넌트 페인 포인트

With the amount of pain caused by styling & customization issues, it's no wonder “headless” libraries such as Radix and React Aria have proven so popular.

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

Other Answers

Answers matching “Other Answers” 278
0%
20%
40%
60%
80%
100%
% of question respondents
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.
우리를 지원해 준 파트너들께 감사 드립니다! 더 알아보기.