11 React UI Component Libraries you Should Know in 2019
Although still behind Angular in the sheer numbers of users, React is leading in popularity in Stack overflow’s most loved component libraries.
React’s virtual DOM, the ability to declaratively describe a user interface and model the state of that interface, low barriers to entry for a decent Javascript developer, all make React a great go-to library for building UI’s.
Another great reason for working with React is components. Components let you split the UI into independent, reusable pieces. To help kickstart your work with React components, here are 11 great React component libraries to use.
Tip: Today it’s easier than ever to build a component library with tools like bit.dev (GitHub). It lets you dynamically harvest and collect UI components into a “component playlist” in bit.dev, and use them in your apps.
It removes 90% of the overhead, it’s scalable, and it provides powerful next-generation features for shared components to help compose UI apps. For example, it will let you modify a component from any project using it.
Learn more: 15 Reasons to Build Your Component Library in Bit.dev
Or go ahead and give it a try:
By reusing your own components you can save development time, keep your UI consistent across applications and let your whole team build together.
1. React Material-UI
React Material-UI is a set of React components that implements Google’s Material Design. With over 45k stars on GitHub, it is probably the most popular React component library. The library’s v1 is coming up.
GitHub repo:
Component collection:
2. React-Bootstrap
React-Bootstrap is a React component library with the look-and-feel of Twitter’s popular Bootstrap. At over 15k stars, its simplicity receives wide popularity in the community.
GitHub:
Component collection:
3. React toolbox
React Toolbox is a set of React components that implements Google Material Design specification. It’s built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library’s website provides a live component playground.
4. React Belle
React Belle is a set of React components optimized to work both on mobile & desktop devices. The styles are highly customizable so you can configure the base styles of all the components as well as modify each one of them individually. Here is also a nice example.
5. React Grommet
React Grommet (V2 now out in 2019!) provides a rich selection of components grouped by usage classifications, and all components are accessible, cross-browser compatible and support theme customization.
Github Repo:
Component collection:
6. React Components by Khan Academy
Khan Academy’s React components are released as a component library, with inline CSS and comments. Individual components can also be installed from this Bit Scope created by adding Bit the library.
7. Material Components Web
Material Components Web is developed by a core team of engineers and UX designers at Google, and its components enable a reliable development workflow to build beautiful and functional web projects. It has replaced react-mdl (which is now deprecated), already reaching nearly 12k stars.
8. Ant Design React
Following the Ant Design specification, React Ant Design is a React UI library that contains a set of components and demos. It’s written in TypeScript with complete defined types, and provides an NPM+ webpack + dva front-end development workflow.
9. Semantic UI React
Semantic UI React is the official Semantic-UI-React integration. With nearly 5k stars and used by Netflix and Amazon, these components provide an interesting and flexible arsenal.
GitHub repo:
Component collection:
10. Onsen UI
Onsen UI React Components made available with Onsen UI React bindings and provide hybrid mobile apps with React and Onsen UI Framework. With 81 contributors and over 7k stars, it’s an interesting library to consider.
11. React Virtualized
At nearly 8k stars, React Virtualized provides React components for efficiently rendering large lists and tabular data.
Individual components
Individual components can be found in the popular awesome-react and awesome-react-components projects. You can also add Bit to any repository or library to track and isolate components within it. Then, these components can be exported directly from any path in the repo in seconds and any developer can then install them with NPM/Yarn and make changes from any project.
As it seems, in 2018 the popularity of React will continue to rise and its components will grow to become the modular building blocks of more of the apps we use every day.
- Check out part 2:
