A Guide to Commonly Used React Component Libraries
Tags: react, webdev
Published: 2020-08-14 09:30:37

---
title: A Guide to Commonly Used React Component Libraries
published: true
date: '2020-08-13T21:37:42.291Z'
tags: ['react','webdev']
canonical_url: https://maxrozen.com/guide-to-component-ui-libraries-react/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h2ro4sban6fnvyg3oqjl.jpg
description: "There are a *lot* of React Component libraries to choose from. This guide attempts to put them all on one page."

---

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#ant-design)Ant Design

[![Ant Design Pro](https://maxrozen.com/static/709b9b5610cc3f9b8b0044432c27984f/fcda8/antdesignpro.png "Ant Design Pro")](https://maxrozen.com/static/709b9b5610cc3f9b8b0044432c27984f/4b39a/antdesignpro.png)

Project link: [Ant Design](https://ant.design/)

Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=antd@4.5.4)): 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)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#bootstrap)Bootstrap

[![Bootstrap](https://maxrozen.com/static/05a9570527cc0535ab75570be35185eb/fcda8/bootstrap.png "Bootstrap")](https://maxrozen.com/static/05a9570527cc0535ab75570be35185eb/e8814/bootstrap.png)

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:

- [React Bootstrap](https://react-bootstrap.github.io/)

  - Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=react-bootstrap@1.3.0)): 111kB minified, 34.4kB minified + gzipped, less with treeshaking

- [Reactstrap](https://reactstrap.github.io/)

  - Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=reactstrap@8.5.1)): 152.1kB minified, 39.4kB minified + gzipped, less with treeshaking

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#bulma)Bulma

[![Bulma](https://maxrozen.com/static/8bf5a508641f3fd64b12facf6d628784/fcda8/bulma.png "Bulma")](https://maxrozen.com/static/8bf5a508641f3fd64b12facf6d628784/e8814/bulma.png)

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:

- [Bulma](https://bulma.io/)
- [react-bulma-components](https://github.com/couds/react-bulma-components)
  - Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=react-bulma-components@3.4.0)): 179kB minified, 20.1kB minified + gzipped

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#chakra-ui)Chakra UI

[![Chakra UI](https://maxrozen.com/static/8077f438a7cf9aa9ef7da76b2e7c27ee/fcda8/chakra-ui.png "Chakra UI")](https://maxrozen.com/static/8077f438a7cf9aa9ef7da76b2e7c27ee/e8814/chakra-ui.png)

Project link: [Chakra UI](https://chakra-ui.com/)

- Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=@chakra-ui/core@0.8.0)): 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.

Notes:

- Very close to v1 release, so be aware of breaking changes coming from v0.8.0

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#material-ui)Material UI

[![Material UI](https://maxrozen.com/static/30a1948174853df72b6b3bbbfd4975c4/fcda8/material-ui.png "Material UI")](https://maxrozen.com/static/30a1948174853df72b6b3bbbfd4975c4/e8814/material-ui.png)

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](https://cssinjs.org/?v=v10.3.0#jss-example), but thankfully it’s now [possible to override styles](https://material-ui.com/guides/interoperability/#styled-components) with styled-components and Emotion.

Project link: [Material UI](https://material-ui.com/)

- Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=@material-ui/core@4.11.0)): 325.7kB minified, 92kB minified + gzipped, less with treeshaking

Pros:

- Comprehensive documentation
- Icon library is [massive](https://material-ui.com/components/material-icons/)
- 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)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#semantic-ui)Semantic UI

[![Semantic UI](https://maxrozen.com/static/07600227238f39b2d1b2fc5eb8f42874/fcda8/semantic-ui.png "Semantic UI")](https://maxrozen.com/static/07600227238f39b2d1b2fc5eb8f42874/e8814/semantic-ui.png)

Project links:

- [Semantic UI](https://semantic-ui.com/)
- [Semantic-UI-React](https://github.com/Semantic-Org/Semantic-UI-React)

  - Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=semantic-ui-react@1.2.0)): 300.8kB minified, 80.9kB minified + gzipped, less with treeshaking

Pros

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

Cons

- Potential uncertainty about the open source project.

  - See issues: [https://github.com/Semantic-Org/Semantic-UI/issues/6109](https://github.com/Semantic-Org/Semantic-UI/issues/6109) [https://github.com/Semantic-Org/Semantic-UI/issues/6413](https://github.com/Semantic-Org/Semantic-UI/issues/6413)
  - Community-run fork exists: [https://github.com/fomantic/Fomantic-UI](https://github.com/fomantic/Fomantic-UI)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#honourable-mentions)Honourable mentions

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#reach-ui)Reach UI

[Reach UI](https://reach.tech/) 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.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#reakit)Reakit

[Reakit](https://reakit.io/) 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](https://bundlephobia.com/result?p=reakit@1.2.1)): 119.9kB minified, 32.1kB minified + gzipped, less with treeshaking

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#rebass)Rebass

[![Rebass](https://maxrozen.com/static/abbff9f085f8ef377e3250ec1b2710d9/fcda8/rebass.png "Rebass")](https://maxrozen.com/static/abbff9f085f8ef377e3250ec1b2710d9/e8814/rebass.png)

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](https://rebassjs.org/demo).

Project link: [Rebass](https://rebassjs.org/)

- Bundle Size (from [BundlePhobia](https://bundlephobia.com/result?p=rebass@4.0.7)): 43kB minified, 14.4kB minified + gzipped, less with treeshaking

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#notes)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](https://styled-components.com/) and [Emotion](https://emotion.sh/docs/introduction), and utility CSS systems such as [Tailwind](https://tailwindcss.com/), as they are not explicitly “React Component libraries”, but rather tools with which to make your components.

Am I missing any? Tell me on [Twitter!](https://twitter.com/RozenMD)

(This is an article from MaxRozen.com. You can read the original by [clicking here](https://maxrozen.com/guide-to-component-ui-libraries-react/).)