5 React Component Toolkits

Have you ever built a Dropdown, Table or other component in React and felt like you were reinventing the wheel?

It turns out, you are! These common components have been built over and over again.

There are tons of one-off React components out there, but right now I’m focused on toolkits. These are large libraries of React components.

Toolkits are particularly great for prototyping because they help you put together an app quickly.

Caveat: These toolkits might not be the best thing if you have a designer handing you a design that you need match exactly. Many of them support theming, but often it is difficult to do a complete redesign.

Styling

Before I get to the list, let’s talk about how you actually use these toolkits.

All these toolkits can be installed with npm install and then used with import or require(). Usually you can import just the components you need.

Here’s the catch: to get at the styles / CSS you sometimes have to do more work. Each of these toolkits provides the styles in one or more of the following ways:

• Static File: The CSS is provided as a file that you can include on your HTML page with a <link> tag. Alternatively many Webpack configurations will allow you to 'import' the CSS so that it becomes part of your bundle.
• CSS Modules: The CSS gets automatically imported with each component, but you may have to modify your Webpack config (and you have to be using Webpack or something similar in the first place).
• Inline: The styles are inlined on the component elements, so you don’t have to do any extra work. This is easy for you, but there are performance drawbacks.

Now, on to the list!

The List

1. Material-UI

• GitHub: github.com/callemall/material-ui
• Demo: material-ui.com/#/components/app-bar
• Styles: Inline

This is a super popular project with 27,000+ stars. It is one of the projects that implements Google’s material design recommendations.

I would go with this one if you like Google’s material design.

2. React-Bootstrap

• GitHub: github.com/react-bootstrap/react-bootstrap
• Demo: react-bootstrap.github.io/components.html
• Styles: Static File

If you like bootstrap, you’ll love React-Bootstrap. This is a very faithful port of bootstrap to React. So much so, that they are relying on the original bootstrap CSS files - only the JS has changed. These are Bootstrap 3 components. For Bootstrap 4, see Reactstrap, below.

3. React Toolbox

• GitHub: github.com/react-toolbox/react-toolbox
• Demo: react-toolbox.com/#/components
• Styles: CSS Modules OR Static File

This is another Google Material design project. It appears to be of high quality, but I would have trouble picking this project over our #1 pick Material-UI, which has more components and more traction.

4. Blueprint

• GitHub: github.com/palantir/blueprint
• Demo: None, but see the API: blueprintjs.com/docs/#core/accessibility
• Styles: Static File (or SCSS)

This is a huge component library that to my eyes looks a bit similar to Bootstrap. I plan on browsing the components in this library for inspiration even if I don’t use the library itself.

I believe that instead of a static file the styles can be imported as SCSS but the documentation didn’t seem to clear on this point.

5. React Native Web

• GitHub: github.com/necolas/react-native-web
• Demo: necolas.github.io/react-native-web/storybook/
• Styles: Inline

This one is unique. It allows you to render react native components on the web. This is super useful if you are building a cross-platform app.

This one has my favorite demo because it uses storybook. Storybook is not only great for viewing components as you can see here but also great for developing and testing components. More on that in a future post.

4 More Bonus Toolkits

Thanks to my readers for suggesting 4 more toolkits. Here they are in no particular order:

6. Ant Design

• GitHub: github.com/ant-design/ant-design
• Demo: ant.design/docs/react/introduce
• Styles: Less

This is a little bit more than a set of components - it is a framework. All I mean by that is they provide you with some commands to set up a project that follows their conventions and uses some packages/plugins that are specific to ant design.

If you don't set up a project in the way that they recommend, using these components is a bit tricky. You'll need a babel plugin created by the ant design people: babel-plugin-import. This makes them an outlier when it comes to how they set up their styles.

This is a nice big set of components, but I was a bit thrown off by the grammar in the documentation. It was translated from Chinese and could use a few edits.

7. Semantic UI React

• GitHub: github.com/Semantic-Org/Semantic-UI-React
• Demo: react.semantic-ui.com/elements/button
• Styles: Static File

Another nice big set of polished components. This is a set of React components built on top of a pre-existing CSS framework: Semantic UI.

8. Reactstrap

• GitHub: github.com/reactstrap/reactstrap
• Demo: reactstrap.github.io/components/alerts/
• Styles: Static File

Similar to Semantic UI React and React-Bootstrap, this is a set of React components built to work with an existing CSS framework. In this case the framework is Bootstrap 4.

Compare this library to React-Bootstrap, above, which is built to work with Bootstrap 3.

9. Bloomer (Bulma)

• GitHub: github.com/AlgusDark/bloomer
• Demo: bloomer.js.org/#/documentation/grid/columns
• Styles: Static File

Not a lot of stars on this project, but it is a React implementation of the very popular Bulma CSS framework.

Conclusion

Even if you don't want components that look exactly like those provided in the above toolkits, I strongly suggest that you take a look at at least one toolkit.

You might find something you need, and if not, reading the implementations can be enlightening. These are components that have had a ton of developer eyes 👀 looking at them and testing them.

And don't forget to subscribe! I'll keep bringing useful tools and libraries to your attention.