[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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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¶ms=§ionId=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/)