23 Best React UI Component Libraries And Frameworks

![](https://hackernoon.com/hn-images/1*ruk9c2uz62aEdb8Nm5PWHw.jpeg) _A curated summary of_ [**_part 1_**](https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4) _and_ [**_part 2_**](https://blog.bitsrc.io/best-react-ui-component-libraries-for-2018-part-2-d231dcb04c0a) _of_ **_“_**_Best_ [_React_](https://hackernoon.com/tagged/react) _Component Libraries for 2019_**_”_**_._ _Learn more:_ * [5 Tools for faster development in React](https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2) * [How to write better code in React](https://blog.bitsrc.io/how-to-write-better-code-in-react-best-practices-b8ca87d462b0) * [_9 React tools to master your component workflow_](https://blog.bitsrc.io/9-tools-and-libraries-to-boost-your-react-component-workflow-6ff4b49511c2) * [_How to easily share react components between apps_](https://blog.bitsrc.io/how-to-easily-share-react-components-between-projects-3dd42149c09) According to the Stack Overflow survey [React](https://hackernoon.com/tagged/React) grew in popularity by almost 150% from [2017](https://insights.stackoverflow.com/survey/2017#technology-frameworks-libraries-and-other-technologies) to [2018](https://insights.stackoverflow.com/survey/2018/#technology-frameworks-libraries-and-tools). This isn’t really surprising, and among other things is happening thanks to its growing component-based ecosystem. Some prefer libraries, others to develop their own components (see [tools for component workflow](https://blog.bitsrc.io/9-tools-and-libraries-to-boost-your-react-component-workflow-6ff4b49511c2) mastery). Either way, here is the full list of some of the best 23 UI component libraries and frameworks out there, with a bonus at the end. Note that the list isn’t ranked, but brought as a useful resource. Enjoy. You can also combine these libraries with [**Bit**](https://bitsrc.io), to make each component individually available to discover, share and use without the library. [![](https://hackernoon.com/hn-images/1*Yhkh7jbS5Mx9uP96Y88pZg.gif)](https://bitsrc.io) Every component becomes available to discover, try hands-on in a live playground, and install in your projects using NPM and Yarn. You can even develop components from multiple projects and sync changes between them. [![](https://hackernoon.com/hn-images/1*ys-NwvhyZ20qYpg6ZD3kEg.gif)](https://bitsrc.io/components) [Bit (GitHub)](https://github.com/teambit/bit) can be used to discover and share components from any open source library, or for your team’s components, so feel free to give it a try. Find more components from popular React libraries: [**Discover Collections · Bit** _Discover over 21 component collections for JavaScript libraries and projects. Find and use popular components from the…_bit.dev](https://bit.dev/collections "https://bit.dev/collections")[](https://bit.dev/collections) ### 1\. Material-UI React components that implement Google’s Material Design. At over [45k Stars](https://github.com/mui-org/material-ui) (!), it’s the most popular and widely used React UI library on GitHub. ![](https://hackernoon.com/hn-images/1*3DYFedZJwn4Qf2rsjwvjoQ.png) Material UI [Grid-List](https://www.material-ui.com/#/components/grid-list) component GitHub repo: [**mui-org/material-ui** _React components for faster and easier web development. Build your own design system, or start with Material Design. …_github.com](https://github.com/mui-org/material-ui "https://github.com/mui-org/material-ui")[](https://github.com/mui-org/material-ui) Individual components collection: [**material-ui by mui-org · Bit** _React components that implement Google’s Material Design. — 115 Javascript components. Examples: tab , tooltip …_bit.dev](https://bit.dev/mui-org/material-ui "https://bit.dev/mui-org/material-ui")[](https://bit.dev/mui-org/material-ui) [![](https://hackernoon.com/hn-images/1*L4aPDcmCLFPEpxBvaCuFPw.png)](https://bit.dev/mui-org/material-ui) ### 2\. [React Bootstrap](https://react-bootstrap.github.io/) Bootstrap 3 components built with React. At [16k stars](https://github.com/react-bootstrap/react-bootstrap), this library remains popular and useful even though we are still waiting for bootstrap 4 support. ![](https://hackernoon.com/hn-images/1*corPSuePHtZUWK2uczxBEA.png) React bootstrap [buttons](https://react-bootstrap.github.io/components/buttons/) GitHub repo: [**react-bootstrap/react-bootstrap** _Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account…_github.com](https://github.com/react-bootstrap/react-bootstrap "https://github.com/react-bootstrap/react-bootstrap")[](https://github.com/react-bootstrap/react-bootstrap) Individual components collection: [**react-bootstrap by react-bootstrap · Bit** _Bootstrap components built with React — 92 Javascript components. Examples: button-group , alert , modal , navbar …_bit.dev](https://bit.dev/react-bootstrap/react-bootstrap "https://bit.dev/react-bootstrap/react-bootstrap")[](https://bit.dev/react-bootstrap/react-bootstrap) [![](https://hackernoon.com/hn-images/1*8icTzpZwO1XfNRt-jD_-hg.png)](https://bit.dev/react-bootstrap/react-bootstrap) ### 3\. [Grommet](https://v2.grommet.io/) Beautiful React UI component which focus on essential experience. At [over 5k stars](https://github.com/grommet/grommet), these components take pride in their simple yet beautiful design. ![](https://hackernoon.com/hn-images/1*v_eBiv5_qx78sa4BuDoWgw.png) React Grommet buttons GitHub repo: [**grommet/grommet** _a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package …_github.com](https://github.com/grommet/grommet "https://github.com/grommet/grommet")[](https://github.com/grommet/grommet) Individual components collection: [**grommet by grommet · Bit** _a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. - 73…_bit.dev](https://bit.dev/grommet/grommet "https://bit.dev/grommet/grommet")[](https://bit.dev/grommet/grommet) [![](https://hackernoon.com/hn-images/1*VjKMzbdLI019fD6L66Cj8Q.png)](https://bit.dev/grommet/grommet) ### 4\. [Ant Design React](https://ant.design/docs/react/introduce) Popular React components following the Ant design guidelines and specifications, written in typescript and supporting a rich workflow. ![](https://hackernoon.com/hn-images/1*uNLzptXVxLpKHgHjh5qJAw.png) [Ant design components](https://github.com/ant-design/ant-design) ### 5\. [Blueprint](http://blueprintjs.com/) A React-based UI toolkit for the web with over 9K stars and 100 contributors. Components are written in TS and styled with Sass for rapid development. ![](https://hackernoon.com/hn-images/1*LnDsYbOxkB3mXWle6oyHTg.png) Blueprint [React components](http://blueprintjs.com/) ### 6\. [Reactstrap](https://reactstrap.github.io/) This library provides simple React bootstrap 4 components. With [over 4k](https://github.com/reactstrap/reactstrap) stars and nearly 100 contributors, it’s a widely popular option for bootstrap fans. ![](https://hackernoon.com/hn-images/1*JB_oQN9tiw2KUANJ8P7cIg.png) Reactstrap [buttons](https://reactstrap.github.io/components/buttons/) ### 7\. [React Toolbox](http://react-toolbox.io/#/) React Toolbox is a set of React components that implements Google Material Design. It’s built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. At nearly 8K starts it’s very popular. ![](https://hackernoon.com/hn-images/1*90MdGuJo3YcaQ9ZG6NHuww.png) React Toolbox components- docs have a [live playground](http://react-toolbox.io/#/components)! ### 8\. [React Desktop](http://reactdesktop.js.org/) A UI component [library](https://github.com/gabrielbull/react-desktop) which aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components. ![](https://hackernoon.com/hn-images/1*XNlyh9TWm7WVxMxPxJiqlA.png) React Desktop [Window Component](http://reactdesktop.js.org/docs/mac-os/window/) ### 9\. Semantic UI Semantic UI React is the official React integration for [Semantic UI](https://semantic-ui.com/). With [6.5K stars](https://github.com/Semantic-Org/Semantic-UI-React) it’s used by Netflix, Amazon and other great organizations. ![](https://hackernoon.com/hn-images/1*5702GFIo5oaJYUxSJuI5cw.png) React Semantic-UI [Dimmer component](https://react.semantic-ui.com/modules/dimmer) GitHub repo: [**Semantic-Org/Semantic-UI-React** _The official Semantic-UI-React integration. Contribute to Semantic-Org/Semantic-UI-React development by creating an…_github.com](https://github.com/Semantic-Org/Semantic-UI-React "https://github.com/Semantic-Org/Semantic-UI-React")[](https://github.com/Semantic-Org/Semantic-UI-React) Individual components collection: [**semantic-ui-react by semantic-org · Bit** _The official Semantic-UI-React integration — 76 Javascript components. Examples: button , dimmer , text-area , table …_bit.dev](https://bit.dev/semantic-org/semantic-ui-react "https://bit.dev/semantic-org/semantic-ui-react")[](https://bit.dev/semantic-org/semantic-ui-react) [![](https://hackernoon.com/hn-images/1*-VSbvKbQakVq6W_rvhhiCA.png)](https://bit.dev/semantic-org/semantic-ui-react) ### 10\. [Onsen UI React](https://onsen.io/react/) More than 100 components are specially made for Material and Flat design bringing together the Onsen UI [framework](https://hackernoon.com/tagged/framework) and React to build hybrid apps. ![](https://hackernoon.com/hn-images/1*eq0u-2VwWNfeo_FuxUJ5gA.png) Onsen UI React [components](https://onsen.io/theme-roller/) ### 11\. [Rebass](http://jxnblk.com/rebass/) React UI component library & design system, built with styled-components and styled-system. With nearly [4k stars](https://github.com/jxnblk/rebass) it’s a great choice for Styled-components fans. ![](https://hackernoon.com/hn-images/1*u4ouuUxVhL-FU68uDF_gYQ.png) Rebass React UI [components](http://jxnblk.com/rebass/getting-started) ### 12\. [Elemental UI](http://elemental-ui.com/) An experimental UI Toolkit for React.js Websites and Apps with 4k stars and currently developed by the authors of Keystone.js at the Thinkmill. ![](https://hackernoon.com/hn-images/1*ff7YA_PyQy050YWWD5Rfkw.png) Elemental UI [modal component](http://elemental-ui.com/) ### 13\. [Belle](http://nikgraf.github.io/belle/#/?_k=19jslm) A set of React components optimized for mobile & desktop with highly customizable styles which can be configured on the base level as well individually for each one of them. ![](https://hackernoon.com/hn-images/1*jV5fibk7rMWakqKVNaecjw.png) React belle [components](http://nikgraf.github.io/belle/#/component/card?_k=2mkdb1) ### 14\. [Prime React](https://www.primefaces.org/primereact/#/) At over [1000 stars](https://github.com/primefaces/primereact), we love this project which provides a rich and unique selection of over 70 UI components with multiple themes. Take a look! [![](https://hackernoon.com/hn-images/1*5G47fkcgq4FipYDy5AVGBg.png)](https://bit.dev/primefaces/primereact/chart?example=5c7e875698f9d200131d0747) A Primereact Chart component with Bit: play and install GitHub repo: [**primefaces/primereact** _PrimeReact is a collection of rich UI components for React - primefaces/primereact_github.com](https://github.com/primefaces/primereact "https://github.com/primefaces/primereact")[](https://github.com/primefaces/primereact) Individual components collection: [**primereact by primefaces · Bit** _PrimeReact is a collection of rich UI components for React. - 73 Javascript components. Examples: chart , inputtext …_bit.dev](https://bit.dev/primefaces/primereact "https://bit.dev/primefaces/primereact")[](https://bit.dev/primefaces/primereact) [![](https://hackernoon.com/hn-images/1*AREZUtDFrZ3B0gjZM3E_FQ.png)](https://bit.dev/collections) ### 15\. [Atlaskit](https://atlaskit.atlassian.com/) Atlasssian’s official [React UI kit](https://bitbucket.org/atlassian/atlaskit-mk-2) is the technical implementation of the [Atlassian Design Guidelines](http://atlassian.design/ "Atlassian Design Guidelines") (ADG). Each is even its own package. ![](https://hackernoon.com/hn-images/1*U_DeqvvPl483FaXWNsqhyg.png) Atlaskit Multi-select React [component](https://atlaskit.atlassian.com/packages) ### 16\. [Fabric](https://developer.microsoft.com/en-us/fabric) A set of React components for building experiences for Office and Office 365, written in Typescript. At over [2.5K stars](https://github.com/OfficeDev/office-ui-fabric-react) it’s worth checking out ([quick-start](https://dev.office.com/fabric#/get-started)). ![](https://hackernoon.com/hn-images/1*JfRmdZVnQ4sMUTKa0VLR6Q.png) Fabric [Nav-Bar](https://developer.microsoft.com/en-us/fabric#/components/nav) React Component ### 17\. [Carbon Components](http://react.carbondesignsystem.com/) React components according to IBM’s [Carbon design system](http://carbondesignsystem.com/). You can also try them online with [CodeSandBox](https://codesandbox.io/s/x2mjypo6pp). ![](https://hackernoon.com/hn-images/1*JrFlhEWQFQBE7CRGpbXyEQ.png) ### 18\. [Khan React Components](https://github.com/Khan/react-components) These somehow almost unnoticed components are Khan’s academy’s React UI components released to the community reaching nearly 1k stars. ![](https://hackernoon.com/hn-images/1*TSF1zHyGQbQc4xstFV31eg.png) Khan’s blur-input [React component](http://khan.github.io/react-components/#tooltip) ### 19\. [Gestalt by Pinterest](https://github.com/pinterest/gestalt) This upcoming library is Pinterest’s design studio meticulous set of React UI building blocks used to sync and raise the bar among Pinterest’s teams. ![](https://hackernoon.com/hn-images/1*o5M-FjNvAkpLL6HwI2kLWQ.png) Gestalt React [search-filed component](https://pinterest.github.io/gestalt/#/SearchField) ### 20\. [Material Components Web](https://material.io/components/web/) Developed by a team of engineers and designers at Google, this library replaced react-mdl, already reaching nearly [7k stars](https://github.com/material-components/material-components-web/). Check it out. ![](https://hackernoon.com/hn-images/1*G3thCB03TvwmiAW5HPvTPg.png) [Material-web components](https://material.io/components/web/catalog/) ### 21\. [React MD](https://react-md.mlaursen.com/) A beautiful and highly recommended kit for building a web app with Google’s Material Design with very highly customizable themes and styling (Sass). ![](https://hackernoon.com/hn-images/1*PXKuxkV5dvDwqo0tTBKDRw.png) React-MD [subheaders component](https://react-md.mlaursen.com/components/subheaders) ### 22\. [React Foundation](https://react.foundation/) In very active development this project wraps parts of [Foundation](https://foundation.zurb.com/sites/docs/) as React components, and takes pride in simplicity and high coverage. Very nice. ![](https://hackernoon.com/hn-images/1*xAfJtZiD9iXB13kKA3Jklw.png) Foundation’s [button component](https://react.foundation/) with React GitHub repo: [**digiaonline/react-foundation** _Foundation as React components. Contribute to digiaonline/react-foundation development by creating an account on…_github.com](https://github.com/digiaonline/react-foundation "https://github.com/digiaonline/react-foundation")[](https://github.com/digiaonline/react-foundation) Individual components collection: [**primereact by primefaces · Bit** _PrimeReact is a collection of rich UI components for React. - 73 Javascript components. Examples: chart , inputtext …_bit.dev](https://bit.dev/primefaces/primereact "https://bit.dev/primefaces/primereact")[](https://bit.dev/primefaces/primereact) [![](https://hackernoon.com/hn-images/1*z0hCJP6X9efgOnmIn4cL3g.png)](https://bitsrc.io/digiaonline/react-foundation) ### 23\. [React Virtualized](https://github.com/bvaughn/react-virtualized) Pretty much the perfect set of React components for virtualizing large data sets. With nearly [10k stars](https://github.com/bvaughn/react-virtualized) it is popular as it is useful. ![](https://hackernoon.com/hn-images/1*_sUhcaxY1vRfS9Bw9wX5aQ.png) React virtualized [components](https://bvaughn.github.io/react-virtualized/#/components/List) ### +5 Bonus ✨ Sadly, most of them aren’t actively maintained. Still worth checking out. #### \* [React UWP](https://www.react-uwp.com/) Microsoft’s UWP design with React. ![](https://hackernoon.com/hn-images/1*PDA-U2BPqODXUudnRvyynA.png) #### \* [Amaze UI React](http://amazeui.org/react/) a React implementation for the china’s popular [Amaze-UI](http://amazeui.org/) cross-platform framework. ![](https://hackernoon.com/hn-images/1*zp4n5rIk3HJFK0ctCSItcg.png) #### \* [UXCore](http://uxcore.coding.me/components/button/) React components for enterprise back-end data apps. ![](https://hackernoon.com/hn-images/1*xyYDW-5W31kNiKJDcdaWzA.png) #### \* [Zent](https://www.youzanyun.com/zanui) A beautiful under-the-radar Chinese React UI library. ![](https://hackernoon.com/hn-images/1*tUdKFnU67C5uxSudv3MJUA.png) #### \* [Halogen](http://madscript.com/halogen/) Loaders and spinners only. ![](https://hackernoon.com/hn-images/1*JDrNoGpEU7WoKpFSZBiEbA.png) #### \* [React bootstrap with material design](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) Material Design for Bootstrap 4 — React version. [**mdbootstrap/React-Bootstrap-with-Material-Design** _React-Bootstrap-with-Material-Design - React Bootstrap with Material Design_github.com](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design "https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design")[](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) #### \* react-selectrix A beautiful, materialized and flexible React Select control. [**stratos-vetsos/react-selectrix** _react-selectrix - A beautiful, materialized and flexible React Select control_github.com](https://github.com/stratos-vetsos/react-selectrix "https://github.com/stratos-vetsos/react-selectrix")[](https://github.com/stratos-vetsos/react-selectrix) #### \* react-materialize [**react-materialize/react-materialize** _Material design for react, powered by materializecss - react-materialize/react-materialize_github.com](https://github.com/react-materialize/react-materialize "https://github.com/react-materialize/react-materialize")[](https://github.com/react-materialize/react-materialize) ### Not using libraries? ![](https://hackernoon.com/hn-images/1*GBaTY-AWp7ie1iCUClcP0g.png) Adding entire libraries can be a burden and make it hard to change stuff on the fly. So, Individual components can be found in [Awesome React](https://github.com/enaqx/awesome-react) and [Awesome React components](https://github.com/brillout/awesome-react-components) as well as [here](https://reactjs.org/community/ui-components.html). Hope you enjoyed! ### Learn more [**Atomic Design With React And Bit: Simplify a Complex UI** _Simplify a complex UI using Atomic Design with React + Bit._blog.bitsrc.io](https://blog.bitsrc.io/simplify-complex-ui-by-implementing-the-atomic-design-in-react-with-bit-f4ad116ec8db "https://blog.bitsrc.io/simplify-complex-ui-by-implementing-the-atomic-design-in-react-with-bit-f4ad116ec8db")[](https://blog.bitsrc.io/simplify-complex-ui-by-implementing-the-atomic-design-in-react-with-bit-f4ad116ec8db) [**5 Tools For Faster Development In React** _5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io](https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2 "https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2")[](https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2) [**How To Share React UI Components Between Projects And Apps** _How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io](https://blog.bitsrc.io/how-to-easily-share-react-components-between-projects-3dd42149c09 "https://blog.bitsrc.io/how-to-easily-share-react-components-between-projects-3dd42149c09")[](https://blog.bitsrc.io/how-to-easily-share-react-components-between-projects-3dd42149c09)

23 Best React UI Component Libraries And Frameworks

Too Long; Didn't Read

Companies Mentioned

@ysaring

RELATED STORIES