A Guide to Commonly Used React Component Libraries

Ant Design

Ant Design Pro

Project link: Ant Design

Bundle Size (from BundlePhobia): 1.2 mB minified, 349.2kB minified + gzipped, less with treeshaking

Pros:

  • Ant Design comes with a huge amount of supporting documentation, community, including a separate project (Ant Design Pro) with pre-made templates
  • The kind of UI library you'd use to quickly throw up as a back-office/internal app design

Cons:

  • Accessibility is lacking
  • It's huge. Expect a sizable performance impact when using
  • Pollutes your CSS (expect to add !important to prevent it styling your non-Ant components)

Bootstrap

Bootstrap

I actually rate Bootstrap relatively highly as a UI library. It's not going to win you any design awards, but it gets the job done for side projects and minimum viable products.

It depends what you want to use it for, though. If you're new to React, it's a great library to use to get started. As a more experienced developer, chances are you'll want to look into styled-components/Emotion.

There are two popular libraries with React bindings for Bootstrap, I've personally only used Reactstrap.

Project links:

Pros:

  • The Bootstrap library that you know and love, with React bindings
  • Easily customised via CSS-in-JS
  • It's been around long enough with widespread usage that bugs/issues aren't a worry
  • Quick to get started
  • No jQuery dependency as it's been reimplemented entirely in React

Cons:

  • It's Bootstrap: your site will look like everyone elses if you don't customise it

Bulma

Bulma

Bulma is different to most libraries presented here because it's purely a CSS framework, no JS required. You can choose to either use the classes from Bulma directly, or use a wrapper library such as react-bulma-components.

Project links:

Pros:

  • Doesn't have the Bootstrap look and feel
  • Good for getting something up and running quickly
  • Modern features (Flexbox/Grid under the hood)

Cons:

  • Accessibility: there's some, but doesn't follow WCAG guidelines as strongly as other libraries

Chakra UI

Chakra UI

Project link: Chakra UI

  • Bundle Size (from BundlePhobia): 326.2kB minified, 101.2kB minified + gzipped, less with treeshaking

Pros:

  • Accessibility: follows WAI-ARIA guidelines and components use aria tags
  • Discord server for support
  • Easily customisable (with theming support)
  • Highly modular, so treeshaking actually removes code you don't use

Cons:

  • Quite new.

Material UI

Material UI

Material UI is one of those libraries that I love to hate. It has helped me get through some extremely tight deadlines for clients in the past, but I always end up removing it in favour of almost anything else as soon as possible.

In the past you could only customise Material UI's styles by writing JSS, but thankfully it's now possible to override styles with styled-components and Emotion.

Project link: Material UI

  • Bundle Size (from BundlePhobia): 325.7kB minified, 92kB minified + gzipped, less with treeshaking

Pros:

  • Comprehensive documentation
  • Icon library is massive
  • Simple to use (at first)

Cons:

  • Customisation is difficult, and painful, yet necessary (to improve visuals)
  • Performance: known to render excessive DOM nodes
  • Your app will look like Google made it (which could be a pro, for some people)

Semantic UI

Semantic UI

Project links:

Pros

  • Composable (using the as prop to pass components)
  • Easily customisable
  • Helpful docs
  • High profile users (Netflix internally, Amazon publishing)
  • TypeScript support

Cons

Honourable mentions

Reach UI

Reach UI is a low-level component library, focusing on allowing developers to build accessible React components in their design system.

There's no bundle size available as each component is exported individually as its own npm package.

Reakit

Reakit is another low-level component library. It's technically a UI library, but doesn't come with CSS. So you still need to come up with a styling solution.

  • Bundle Size (from BundlePhobia): 119.9kB minified, 32.1kB minified + gzipped, less with treeshaking

Rebass

Rebass

Rebass has been on my radar for some time. It's an extremely powerful component library that doesn't come with a theme, but can be themed easily. For an example of how this works in practice, see their demo.

Project link: Rebass

  • Bundle Size (from BundlePhobia): 43kB minified, 14.4kB minified + gzipped, less with treeshaking

Notes

In making this list, I've attempted to avoid corporate design systems, however some (Material UI) have achieved such widespread adoption that this list would be incomplete without them.

I've also intentionally left out CSS-in-JS such as styled-components and Emotion, and utility CSS systems such as Tailwind, as they are not explicitly "React Component libraries", but rather tools with which to make your components.

(Shameless plug for the useEffect book I wrote below)

Tired of infinite re-renders when using useEffect?

A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.

Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.

In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.

Master useEffect, in a single afternoon.

useEffect By Example's book cover