When building web apps with React, component libraries help you speed things up, which is always neat. By offering the Bootstrap-like convenience of building React applications out of readymade components, these libraries make web development somewhat similar to playing around with Lego.
In addition, React libraries often enforce development approaches and best practices, decreasing the decision fatigue. At the end of the day, this enables you to ship MVPs faster, while keeping your code readable and maintainable. Needles to say this can save you weeks worth of development time.
Choosing a React components library or framework, on the other hand, is a time-consuming process. There’s a gazillion of options out there, each one having its strengths and weaknesses.
So how do you choose the right library or framework?
To make things easier, here’s a comparison matrix of React components frameworks and libraries. This table includes the most mainstream solutions, as well as lesser-known projects that our React developers consider promising.
Click on the names of a libraries or frameworks for reviews and useful links.
| Framework / library | Design
language / styling | Number
of components | Maintained by | Github
Contributors / Stars | Supported
browsers |
| Material-UI | Google Material Design | 30+ | Call-Em-All, Community | 440 / 27K | Crome 49+, Firefox 45+, IE 11, Edge 14+, Safari 10+ |
| Ant Design | Proprietary design language | 50 | AFX, Community | 300 / 16K | All modern browsers, IE 9+ (with polyfills) |
| React-Bootstrap | Twitter Bootstrap styling | 30+ (Bootstrap 3 components) | Community | 183 / 10.6K | All modern browsers, IE 9+ (with polyfills) |
| React-Toolbox | Google Material Design | 28+ | Community | 206 / 6.7K | All modern browsers, IE 11 |
| Blueprint | Proprietary minimalist styling | 30+ | Palantir | 53 / 6.7K | Chrome, Firefox, Safari, IE 11, Edge |
| Semantic-UI-React | Proprietary minimalist styling | 30+ | Semantic Org, Community | 111 / 3.8K | Latest 2 versions modern browsers;
IE 11+ |
| Fabric | Office Design Language (Microsoft) | 40 | Microsoft, Community | 146 / 1.3K | Latest 2 versions of all modern browsers, IE 11 |
| Grommet | Hewlett Packard Enterprise | 70+ | Hewlett Packard, Community | 89 / 2.2K | All modern browsers, IE 11 |
| Rebass | Custom minimalist styling | 64 | Jxnblk / Brent Jackson, Community | 25 / 2.9K | Flexbox-friendly browsers (no IE) |
| React-MD | Google Material Design | 40 | Mikkel Laursen, Community | 20 / 1.2K | All modern browsers, IE 11 |
| React Desktop | macOS, Windows 10 UI elements | 19 (macOS),
12 (win 10) | Community | 11 / 6.4K | All modern browsers |
Material-UI: React components framework with a focus on Material Design
There are plenty of reasons to opt for a readymade design language, especially if we’re talking about Material Design. Google’s UI development paradigm builds on years of research, plays well with Agile, and is familiar to millions of users.
If you’re building a Material React Application, Material-UI looks like a great choice. This components framework is the brainchild of Call-Em-All, and it enjoys an active following on GitHub.
Material-UI provides you with a wide range of composable encapsulated UI components with decent support for theming and customization. It works with browserify, gulp, razzle and webpack, uses CSS-in-JS for styling, and is available as v0.18.7, with v1.0.0 in beta.
Ant Design: enterprise-grade ecosystem with a proprietary React components library
Ant Design is way more that just a React library or framework. It’s a massive (and somewhat enclosing) ecosystem with a proprietary style guide, custom Webpack-based build tool and custom CLI applications. The project is really well-polished, with giants like Alibaba and Baidu using it.
On the overall, Ant Design would look really neat if it weren’t for one gotcha: most of the documentation, PRs and discussions are in Chinese. The React components library, on the other hand, has English documentation. Besides, the impressive assortment of 50+ React components really makes the case for Ant Design.
The platform supports Internet Explorer 9+, is written in TypeScript and is compatible with Electron for hybrid app development. There’s also an option to use it with standard Webpack, yet the process is a little cumbersome.
React-Bootstrap: React components with bootstrap spec
The idea of building UIs with both Bootstrap and React might be tempting, but the combo is too messy to write on your own. Luckily, some folks are already doing it for you, and their project is gaining traction.
React-Bootstrap was pioneered by Matthew Honnibal, Stephen J. Collings, and Pieter Vanderwerff. The project is in active development, and it already offers a smart implementation of Bootstrap 3 styling encapsulated into React components. It allows you to create and modify such components using JS objects or JSX without having to worry about potential abstraction issues.
React-Bootstrap supports Bootstrap styling, and it doesn’t require bootstrap.js or jQuery. The library targets ES5-compatible browsers and uses polyfills for non-ES5-compatible ones.
React-Toolbox: Material Design with CSS modules
React-Toolbox is a collection of UI components based on CSS modules with locally-scoped class names. The current version of React-Toolbox imports styles written in SASS, yet the version 2 (that’s currently in active development) is gravitating towards PostCSS-cssnext.
Just like Material UI, React-Toolbox favors Google’s Material Design which implies heavy styling as compared to Bootstrap-like frameworks. Still, there’s support for customization and theming with react-css-themr being the recommended tool for both the current and the future version.
The project’s authors and main contributors are Javier Jiménez and Javier Velasco. Even though React-Toolbox isn’t as popular as its archcompetitor Material UI, it’s definitely worth watching (and starring) on Github.
Blueprint: desktop-first React library written in TypeScript
Blueprint is a component library with a primary focus on building data-heavy interfaces for desktop screens. Being essentially desktop-first, it doesn’t offer much in the way of mobile UIs, which is an important thing to consider.
One distinguishing feature of Blueprint is that it’s a TypeScript-based React library. This has several practical implications, including the need to deal with additional dependencies, as well as potential difficulties for ES6 fans.
Being a project of Palantir, Blueprint enjoys a solid developer support. Just like React itself, it’s licensed under BSD, which is a little more restrictive than the MIT or CC licenses of other libraries.
Semantic UI: declarative component APIs
This library promises a clean React-friendly implementation of Semantic-UI-React with its minimalist out-of-the-box styling. The original vision behind Semantic UI comes down to the use of standard React components that developers can modify and expand.
The team maintaining the core aspects of Semantic-UI-React are from TechnologyAdvice, with third-party contributors demonstrating a lot of interest in the project. The library leaves much room for customization and theming while offering barebones layouts and pages.
As of the moment of writing, Semantic-UI-React has found its way into an internal applications at Netflix, as well as quite a few smaller projects.
Fabric: Microsoft Office aesthetic for React
The official React components library from Microsoft, Fabric brings the aesthetic of Ms Office to third-party web apps. Much like Material Design, Fabric is a complete design language rather than a collection of “starter-pack” styles that you will heavily modify.
One tricky thing with the library is the licensing of the fonts and brand icons. While the library itself is MIT-licensed, the fonts and brand icons from MSFT aren’t. This means they might be out of reach if you’re working on an independent project, which seems like a downer.
Quite predictably, the creators of Fabric chose TypeScript when building the library. So if statically typed JS and Metro-style visuals are your thing, Fabric is a React components library that you should definitely check out.
Grommet: a reason to like Hewlett Packard
Grommet makes a great first impression thanks to its neat documentation, style guide, and its huge number of available UI components. Furthermore, it offers a solid enterprise-grade solution complete with a full-fledged design language.
Being a project of Hewlett Packard, Grommet reflects the company’s vision of UX best practices, which might feel a little too specific. In fact, developers claim the framework’s component structuring is somewhat restrictive, with certain components only accepting certain children, nested in a certain way.
The library uses SASS for styling, has a proprietary CLI, and offers templates with boilerplate layouts.
Rebas: presentational components for React
Rebass might seem like another “work-in-progress” library, yet its Github page demonstrates recent major contributions. Rebass uses styled components and enables developers to implement architecture patterns based on the separation of concerns between presentational and container components.
A peculiar thing about Rebass is that it only includes presentational UI components. This approach leaves you writing container components to handle application logic and higher-level architecture, but it also allows for greater flexibility. Besides, it still saves you tons of time as far as presentation and styling are concerned.
React-MD: React components with SASS
As you might’ve guessed, the “MD” in “React-MD” stands for “Material Design”. This library is almost two years old, and it’s 99% a one-man project pushed forward by Mikkel Laursen.
In spite of this fact, React-MD looks surprisingly good. The smooth animations and the sheer speed of its documentation/live demonstration website puts Semantic UI to shame. Besides, React MD lets you access 40 high-quality components styled with SASS, beating the component count of many of its competitors.
So is the React-MD ready for commercial applications? Using it for enterprise projects might feel too risky, but it’s definitely worth testing on smaller or non-commercial projects.
React Desktop: Windows and macOS components for the web
React Desktop is different from other libraries on this list because it’s essentially a small collection of Windows and macOS UI elements.
Specifically, we’re talking about 19 macOS and 10 windows components mimicking native UI elements of the two operational systems. Given this, it’s no surprise that React Desktop poses itself as a solution that works in tandem with Electron.js. In addition, the library supports NW.js (a.k.a. Node-webkit), a technology for calling Node.js modules from DOM.
Are React component libraries good enough for large projects?
As long as you’re working with the right library, the answer is yes. Frameworks provide you with a head start thanks to the readymade architecture. If there’s a community of developers behind the library, you also get regular updates and bug fixes. If there are big-time companies using the framework, you know it can scale.
Naturally, there’s a plethora of other factors to consider, and questions to ask yourself. How much of the boilerplate code are you going to have to rewrite? Are all basic components of your future UI represented in the library? Will your team be productive using the tools a library or framework depends on?
In case you’re looking for expert advice on the topic or searching for skilled UI developers, you’re in the right place! Contact us and tell us about your project, and we’ll help you implement it as a fast responsive UI.
