Brent's Lab Notebook

What React Component Library should I choose?

October 01, 2019

The Contenders

Chakra UI

https://github.com/chakra-ui/chakra-ui

My favorite pick as of 11/1/2019. It has a beautiful, composition-based API and minimal but tasteful style. This is the library I would have built. Note: this library doesn’t include “data-heavy” controls like Table, Select, and Autocomplete. I recommend adding react-select and react-table to fill these gaps.

Ant Design

https://ant.design/

Well documented and mature. They have a component for most use cases. It’s “heavy” but components are full featured. Opinionated design means you’re locked into a certain aesthetic. Written in Typescript.

Blueprint JS

https://blueprintjs.com/docs/

The “right choice” for enterprise, data driven applications with lots of forms. Documentation is impressively bad but they have the best UI components for data-heavy applications (not surprising, considering it’s coming from Palantir). Written in Typescript.

RSuite

https://rsuitejs.com/en/

I don’t have personal experience with this project, but it looks promising. One to watch. High overlap with Antd. Typescript definitions available.

Rebass

https://rebassjs.org/

Big points for composability. Built on top of styled-components and has most the components I include in projects. Typescript definitions available.

Material UI

https://material-ui.com/

Custom components

There’s no substitute for building your own library, but I would only recommend this path for someone with ~2+ years w/ React production experience. There are a lot of ways to go wrong and build inflexible, hard to evolve components. Consider starting with Patchwork and building custom components for anything specific to your project.

Patchwork

There are a lot of high quality React component libraries out there. See here for a good list. A valid strategy is to start with an existing css framework or Custom, then drop in interactive components as needed. End result won’t be quite as cohesive, but framework lockin won’t be a problem.

Bonus

What components do I build or buy in most applications?

  • Select

  • Autocomplete

  • Modal

  • Dropdown

  • Box (layout primitive based on styled-flex-component)

  • Separator

  • Input

  • Label

  • Checkbox

  • Page

  • Navbar

  • Sidemenu

  • Card

  • Table (features varies a lot from project to project)

  • Icon (usually wrapper around font awesome w/ fallback for custom svg’s)

  • Toast

  • Loader

  • DatePicker

  • Chart (wrapper around highcharts or victory charts)

Written by Brent Baumgartner. He lives and works in Charlottesville at TwinThread, building data-driven products. You should follow him on Twitter