6 best React component libraries by category
Tags: react, webdev, javascript, productivity
Published: 2019-12-04 12:28:05

**This post was taken from [my blog](https://areknawo.com), so be sure to check it out for more up-to-date content.**

Love it or hate it, _React_ is undoubtedly one of, if not [the most popular](https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks) front-end JavaScript framework right now, and that’s unlikely to change for the foreseeable future. But, the framework can’t do much on its own. Of course, it’s more pleasant to use than raw JS, CSS, and HTML, but there’s still a lot to be done before you start seeing results.

What makes using a framework even more comfortable are _component libraries_. They provide you with a set of ready-to-use complex elements (like buttons, toolbars, navigation drawers, etc.), which you can use in any of your projects, thus accelerating the development process.

In this article, we’ll briefly explore some of the best React-specific component libraries in their respective categories. Without further ado, let’s get started!

# Design simplicity

![Grommet landing page](https://areknawo.com/content/images/2019/11/grommet.png)

There have been many changes in design trends in the last few years. With digital experiences constantly getting more and more complex and immersive, there's a need to make the User Interface (UI) as unintrusive as possible. That's why there's a move towards increasing _simplicity_.

[Grommet](http://grommet.io/) - a React component library meant for building _responsive_ and _accessible_ web projects, follows that mindset. Its design language focuses on sending a clear, direct message to its users. Any additional or unnecessary styling is limited, and the library maintains a consistent theme across all of its components.

Grommet is an excellent choice for all of those focused on the simplicity and accessibility of their projects. It features beautiful design, well-written docs, a well-rounded set of additional tooling (e.g., for [theming](https://theme-designer.grommet.io/) and [prototyping](https://designer.grommet.io/)), and a pretty big community. Definitely worth checking out!

# Minimalism

![Rebass landing page](https://areknawo.com/content/images/2019/11/rebass.png)

The difference between simplicity and _minimalism_ can be somewhat hard to determine. But, to be clear, we're using this term here to describe only the library itself - not necessarily the design system it's using. So, it's not the same as the previous category, and thus features a different library.

So, [Rebass](https://rebassjs.org/) is a collection of _primitive UI components_, focused mainly on providing the base for creating _your own design system_. Instead of giving you full-blown elements, Rebass minimalizes its custom stylings and instead focuses on flexibility and theming.

If you want to create your own design language to separate your brand from the competition, using Rebass as your foundation might be the right choice. It's a library that won't get in your way, whenever you want to customize or create something from scratch. However, as not everybody has time to create something so big, Rebass is certainly not the "always-go-for" library.

# Mobile-friendly

![Onsen UI landing page](https://areknawo.com/content/images/2019/11/onsen.png)

While mobile devices' market share keeps growing, having a _mobile-friendly_ version of your web project is a must. With today's technology, it's not all that hard to do, but some libraries take it to a whole new level.

[Onsen UI](https://onsen.io/) is a library focused solely on creating mobile hybrid (e.g., with [Cordova](https://cordova.apache.org/)) and [PWA](https://developers.google.com/web/progressive-web-apps) applications. It's available for React, as well as Vue and Angular.

What separates this library from others is the fact that, even though it's still meant only for the web, it provides all of its components in both _Android_ and _iOS variants_. It can then detect the OS your web project is running on and provide the appropriate, native-like look.

If you're targeting only mobile devices, or have enough time and resources to develop a separate desktop version of your project, Onsen UI should meet your expectations.

# Material Design

![Material UI landing page](https://areknawo.com/content/images/2019/11/material.png)

Google's [Material Design](https://material.io/) is on the rise ever since its introduction in 2014. It has dominated the Android world and is now taking its toll on the web. There are a lot of libraries created based on MD specs - both in vanilla JS/CSS/HTML and in many different frameworks. But, there are only a few projects that do it right.

[Material UI](https://material-ui.com/) is arguably the best React implementation of MD specs, and the second most popular React component library (according to GitHub stars). MUI stands out with its vast theming options and an impressive collection of components. Detailed documentation, a lovely demo page, and a vast community are only some of its extra advantages.

If all you want is to _"Material Design all the things!"_ then you'll love MUI. Very much recommended!

# Enterprise

![Carbon Design System landing page](https://areknawo.com/content/images/2019/11/carbon.png)

The design of _enterprise_ projects doesn't have to differ from the more "usual" ones. Take a dashboard, for example. It's not that much different - there are only a bit more _graphs_, and _charts_ included. Yet still, some libraries specialize in that kind of stuff.

The official React implementation of IBM's [Carbon Design System](https://www.carbondesignsystem.com/) is an excellent example of an enterprise-ready library. An impressive set of well-tested components, _toned design_, detailed documentation, and, naturally, dedicated _visualization elements_ are the library's most significant assets. The backing of a stable, well-known company like _IBM_ is also nice to have.

In reality, CDS is so good that it doesn't have to be used only in the enterprise. It's versatile, modular, and accessible enough so that you can consider it even for other projects.

# Complete package

![Ant Design landing page](https://areknawo.com/content/images/2019/11/ant.png)

Some libraries focus solely on doing one thing well, but there are also the ones that do stuff differently and provide you with an _all-in-one_ bundle.

[React Ant Design](https://ant.design/) implementation is one of such libraries. Connected with a giant Chinese company - _Alibaba_ - the project is currently _the most popular_ component library for React (according to GitHub stars).

Ant Design focuses on improving user experience (UX) through more _natural_ UI. Even though its main library does contain a lot of high-quality components, Ant Design extends far beyond that. While not even considering its implementations in other frameworks, only in React, there's a lot to choose from. You've got [Ant Design Pro](https://pro.ant.design/) (for enterprise), [Ant Design Mobile](https://mobile.ant.design/), and even more if you can handle some Chinese documentations.

So, if none of the previous categories suit you, maybe you should consider Ant Design.

# Honorable mention

![Gestalt docs](https://areknawo.com/content/images/2019/11/gestalt.png)

While there's nothing extraordinary about it, I thought [Gestalt](https://pinterest.github.io/gestalt) - a set of React components following _Pinterest_ design language is worth mentioning.

Many might not know that Pinterest has its own open-source React component library. But in fact, it exists (even for quite some time now) and features a well-rounded set of components that share a familiar Pinterest look and feel. Some subtle additions like the _Masonry layout_ component make this library worth a look.

# Your turn

So, I know that this list isn't the longest you've ever seen or that it doesn't necessarily have to reflect your personal feelings. Thus, if you want, feel free to share _your own pick_ for one of the listed categories (or a category of your own) and share it down in the comments.

If you like the post, consider _sharing it_ with others. Also, for more up-to-date content, follow me on [Twitter](https://twitter.com/areknawo), [Facebook](http://facebook.com/areknawoblog), [Reddit](https://www.reddit.com/r/Areknawo/), or through _my weekly newsletter_. You might also check out my new [YouTube channel](https://www.youtube.com/channel/UCUw6bg379ONlG1E_oxhwi-A/) and drop a like or a sub there. Have a nice day!