Update 2017-7-21: Added 4 more toolkits.
Update 2018-1-1: There is a complete, updated list of toolkits, (but without any discussion), in the React components list.
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.
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
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:
<link>tag. Alternatively many Webpack configurations will allow you to 'import' the CSS so that it becomes part of your bundle.
Now, on to the list!
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.
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.
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.
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.
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.
Thanks to my readers for suggesting 4 more toolkits. Here they are in no particular order:
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.
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.
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.
Not a lot of stars on this project, but it is a React implementation of the very popular Bulma CSS framework.
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.