Don’t spend time worrying about design, make your project beautiful from the start
Published in ·
--
React is one of the most popular front-end frameworks for developers to create single-page applications (SPAs). The React community has developed a multitude of component libraries to help accelerate development.
In this article, we’ll take a look at some of the best React component libraries around in 2020.
Ant Design is a set of enterprise-class UIs designed for web applications.
It provides over 50 customizable components that can be used to craft beautiful applications, such as cards, buttons, various layout helpers, navbars, and more.
Ant Design recently beat Material UI to become the most popular React UI library on GitHub, with over 56k stars. It’s used in tons of applications, spanning a multitude of industries, so it’s well supported.
Every aspect of Ant Design is completely thought-out down to the smallest detail. It’s built based on a design system created by the makers.
It is specially created for internal desktop applications and is based on several principles and unitary specifications. With Ant Design, you can easily create a consistent look across all components of your application.
There’s also a mobile version of Ant Design for React Native.
Material UI is a group of components designed around the Google Material spec. With all the necessary components to create a killer React application, Material UI provides an easy way to integrate the Google Material style system into your application.
MaterialUI has an active set of maintainers and a strong community behind it. It currently has over 54k stars on GitHub, making it one of the most popular component libraries out there.
Even better, the components are completely independent of each other and only inject the styles they need to display, which is better for performance.
If you’re looking to build a lightweight, consistent, and clean interface quickly, Material UI is a good choice for you.
You can learn more about Material UI in their information on how to get started.
You’re probably familiar with the popular Bootstrap library. React Bootstrap is a remake of Bootstrap for React, replacing styles with components.
If you’re coming from a web dev background, you’ll probably feel comfortable working with React Bootstrap due to familiarity.
It has gained popularity over the years and now has over 18k stars on GitHub and over 500k downloads on NPM weekly.
It’s by far the best way to get started with Bootstrap in React.
Blueprint UI is another React component library. It’s optimized for building data-dense applications that need to be supported on all platforms. It’s not a mobile-first toolkit but rather designed for desktop applications.
With over 16k stars on Github, it’s well supported and very popular with developers. If your application needs to display large amounts of data, Blueprint UI is probably a good fit.
To get an overview of how it works and the components it offers, you can check it out on CodeSandbox.
Semantic UI React is the official React integration for Semantic UI. It’s jQuery-free and uses a declarative API approach that makes it cleaner and simpler to use.
Semantic UI React has 11.5k stars on Github, so while not as popular as some of the other frameworks, it’s well supported by Semantic.
If you’re looking to build apps with React and want to ensure 100% Semantic-friendly code, you should definitely check it out.
Rebass is a very lightweight library to create theme-able components based on the Styled System library.
Rebass is a primitive component library, meaning it’s by default stylistically unopinionated (you inject your own style) and focuses on only primitive components (such as buttons, layout components, etc.)
If you don’t want to rely completely on component libraries and intend to extend an already existing one during development, you should definitely check out Rebass.
It’s rapidly gaining popularity. The project currently has over 6k stars on GitHub.
If you’ve used Microsoft products, you’ve used Fluent UI. Fluent UI is a set of UI components built from Microsofts design language.
The UI library offers compatibility with desktop, Android, and iOS devices and is used by sites such as Office 365, OneNote, Azure DevOps, and other Microsoft products.
It’s packed with a lot of prebuilt components that make it easy to prototype applications extremely quickly.
The library has 9k stars on Github and is well supported by Microsoft.
Evergreen UI is a component library designed by Segment. It’s an open-sourced project that has components for all essential web functionality.
One of the best things is that they explain all design decisions.
Evergreen’s design is light, simple, and intuitive. You can use it to get started building elegant user interfaces pretty quickly.
Evergreen has almost 10k stars on Github.
Chakra UI is a simple and modular component library with all the necessary web building blocks.
It’s designed with accessibility specs in mind, complying with WAI-ARIA.
All the components are easily theme-able, as all values can be referenced throughout the application.
It’s also very easy to compose new components by putting all the building blocks together.
It has almost 9k stars on Github, and is rapidly gaining popularity within the React developer community.
Grommet is a React framework that provides accessible, modular, responsive, and theme-able components in a tidy package.
Grommet provides support for W3c’s WCAG 2.1 spec out of the box, so it’s already accessible for everyone.
Grommet has powerful theming tools that make it easy to customize any aspect of each component.
Grommet is used by a multitude of large companies, such as Netflix, Github, and Uber, and has almost 7k stars on Github.
Choosing a React component library is no easy task as there’s no one-size-fits-all solution. I recommend carefully looking at your needs, preferred developer style, and each framework to see which one appeals the most to you.
In the end, the best framework is the one that works for you.
Thanks for reading!
