PettyUI/.firecrawl/state-of-react-2025.md

[Skip to content](https://2025.stateofreact.com/en-US/libraries/component-libraries/#page-main)

[« Libraries](https://2025.stateofreact.com/en-US/libraries/)

English

[State Management »](https://2025.stateofreact.com/en-US/libraries/state-management/)

## UI Libraries

The building blocks of your front-end

### [Link to section](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=component_libraries_ratios&params=&sectionId=libraries&subSectionId=component_libraries)     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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=component_libraries_cardinalities&params=&sectionId=libraries&subSectionId=component_libraries)     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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=component_libraries_others&params=&sectionId=libraries&subSectionId=component_libraries)     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

[Base UI](https://base-ui.com/)

Answers matching “Base UI” 49

02

daisyUI

Answers matching “daisyUI” 19

03

[Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)

+5

Answers matching “Fluent UI” 9

04

[Ark UI](https://ark-ui.com/%20-%20react%20-%20ui_libraries)

+9

Answers matching “Ark UI” 9

05

[PrimeReact](https://primereact.org/)

+4

Answers matching “PrimeReact” 8

06

Material UI

Answers matching “Material UI” 8

07

Tailwind CSS

-5

Answers matching “Tailwind CSS” 7

08

[shadcn/ui](https://ui.shadcn.com/)

Answers matching “shadcn/ui” 7

09

[Ariakit](https://ariakit.org/)

-4

Answers matching “Ariakit” 7

10

[Tamagui](https://tamagui.dev/)

-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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=animation_libraries&params=&sectionId=libraries&subSectionId=component_libraries)     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

[Motion (ex-Framer Motion)](https://motion.dev/)

1,443

2

🚫 None

+2

741

3

[React-Spring](https://react-spring.dev/)

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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=data_visualization_libraries&params=&sectionId=libraries&subSectionId=component_libraries)     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

[Chart.js](https://www.chartjs.org/)

1,245

02

D3

1,037

03

Recharts

969

04

🚫 None

+3

460

05

[Highcharts](https://www.highcharts.com/)

437

06

[ECharts](https://echarts.apache.org/en/index.html)

+5

207

07

[ApexCharts](https://apexcharts.com/)

+5

174

08

Nivo

-2

154

09

[Victory](https://formidable.com/open-source/victory/)

-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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=form_libraries&params=&sectionId=libraries&subSectionId=component_libraries)     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

[TanStack Form](https://tanstack.com/form/latest)

+8

567

04

🚫 None

+2

355

05

Redux Form

-1

260

06

React Final Form

-1

164

07

[Mantine Forms](https://mantine.dev/form/use-form/)

-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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=react_form_patterns&params=&sectionId=libraries&subSectionId=component_libraries)     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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=css_tools&params=&sectionId=libraries&subSectionId=component_libraries)     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

[Panda](https://panda-css.com/)

-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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=component_libraries_pain_points&params=&sectionId=libraries&subSectionId=component_libraries)     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](https://share.devographics.com/share/prerendered?localeId=en-US&surveyId=state_of_react&editionId=react2025&blockId=component_libraries_resources&params=&sectionId=libraries&subSectionId=component_libraries)     Recommended Resources

[![Enterprise UI Development: Testing & Code Quality ](https://static.frontendmasters.com/assets/teachers/kinney/thumb@2x.webp)](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=stateofreact&utm_medium=website&utm_campaign=stateofreact2025&utm_content=textlink "Enterprise UI Development: Testing & Code Quality ")

Steve Kinney

Temporal

#### [Enterprise UI Development: Testing & Code Quality](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=stateofreact&utm_medium=website&utm_campaign=stateofreact2025&utm_content=textlink)

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 ](https://static.frontendmasters.com/assets/teachers/sentance/thumb@2x.webp)](https://frontendmasters.com/courses/hard-parts-ui-dev/?utm_source=stateofreact&utm_medium=website&utm_campaign=stateofreact2025&utm_content=textlink "The Hard Parts of UI Development ")

Will Sentance

Codesmith

#### [The Hard Parts of UI Development](https://frontendmasters.com/courses/hard-parts-ui-dev/?utm_source=stateofreact&utm_medium=website&utm_campaign=stateofreact2025&utm_content=textlink)

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.](https://2025.stateofreact.com/en-US/support/)