In this post you will be shown some React component libraries you should be familiar with in your workflow this year with focus on the regularly maintained ones, as there are more than 12 libraries out there.
Material UI is one of the most popular React component libraries with over 48,000 stars on GitHub. The components and all the template elements are built according to the Google’s Material Design guidelines but are all React components. It ships with a lot of React templates and themes to help for customisation. It also provides a lot of UI elements out-of-the-box from cards to buttons to dialog boxes to icons and a lot of menus. It is also regularly updated as the last commit was a few days ago.
This is an interesting one, one of the many progress products that is really amazing. KendoReact is built specifically for development in React and has a 100 percent native mobile support out-of-the-box. Kendo ships with a set of components built by React developers with a world of experience for dialog boxes, guages, layouts, charts even animations. The components are also independent as they require no other dependency but React itself, it also has an import feature in the case that you already use an existing component library.
Blueprint is a React-based UI toolkit for the web built by the team at Palantir. It has currently been starred over 14,000 times on GitHub. It is arguably the best React UI library for data-driven projects like building a fintech user interface or interface for cryptocurrency or financial trade. It has a very extensive documentation for frontend development and it has great looking elements with nice finishes.
If you are building React interactive interfaces for tables, grids and large lists, React Virtualized is the arguably the best UI component to use in your workflow. With over 16,000 stars on GitHub and regular updates with the last commit being last month. There are data-specific components you might not find anywhere else in the component list of React Virtualized like direction sorters and auto-sizers and masonry. Table configurations are also possible here. React Virtualized also comes with mobile support for Andriod and IOS out-of-the-box.
With over 8,000 stars on GitHub, Evergreen is one amazing React UI framework for building ambitious products on the web created by Segment. It contains very polished and nicely designed React components that works out-of-the-box. They are built to be very flexible as they follow React component guidelines, they are used as a design language for enterprise projects. The documentation is very easy to read, understand and implement and it is inspired by React Primitive UI. It was last updated few days ago showing it is regularly maintained.
React Toolbox is a set of React components that implements Google Material Design specification built on top of features like CSS modules, Webpack and ES6. It has a seamless Webpack integration and you can easily customize it. So much thought went into the documentation and it was also built using React Toolbox, there is a playground to test the various components in real-time. You can import components either individually or in bundles. It is being used by over 6,000 projects on GitHub and was last updated some months ago.
Belle is a configurable React component toolkit that provides you with a set of React components like Toggle, ComboBox, Rating, TextInput, Button, Card, Select and soon many more. Every one of these components are optimized for mobile and you are allowed to customize the styles yourself. These freedom can be in the individual component stylesheet or the global stylesheet. It is also optimized for accessibility with ARIA support. It has been starred over 2,000 times on GitHub and is regularly maintained too.
Rebass is a React primitive UI component built with modern styling conventions in mind like styled-components and emotion. It has 8 main components and those 8 have sub components, all being really small in size. It has very responsive and at the same time very easily-themeable style properties. It has a flexbox grid with box and flex components, it has been starred over 5,900 times on GitHub and is very regularly maintained.
React-md is a React component library that helps you creates a fully accessible material design styled website using React Components and Sass. With the separation of styles in Sass instead of inline styles, it is easier to create custom components with the existing styles. It allows for customizing your styles and it ships with this easy-to-read documentation which was also built with React-md. It is starred over 2,000 times on GitHub and the last commit to the project was few weeks ago showing that is regularly maintained.
This has been a quick overview of a few React component libraries you should be familiar with in your workflow. There are a lot more and you can always make your choice according to your personal preference. The only important thing to note should be if the library is regularly maintained, happy hacking!