React is a popular JavaScript library for building user interfaces and creating reusable components. These components can be developed from scratch, but there are other ways to get up and running. By making use of UI kits for development we make the process of developing less time consuming and consistent.
React UI kits are comprehensive resource sets that are already prepared, which include buttons, modals, checkboxes, etc. They enable developers to create outstanding visuals in reasonable timelines and reduce the time and cost of developing designs from scratch. In this article, we are going to review 10 React UI kits to use in 2019.
AtlasKit is the official UI library for Atlassian, and it is built according to Atlassian design guidelines. It is a collection of reusable components that can be downloaded independently into your projects, and each component is also independently versioned and published to npm. Atlas UI kit has certain benefits that include a wide range of components to make use of in your applications.
The kit is an extensible library that can be used for building enterprise applications or landing pages, but I’m not entirely happy about it having each component as a separate package. What this means is for every component I’ll be using I’ll need to install a new package. Jira, BitBucket, and Atlas Starter kit, etc. are some of the projects currently implemented using Atlas UI kit.
Belle is a configurable react component amongst the most interesting React UI Kits, it is optimized for mobile & desktop with highly customizable styles which can be configured on the base level as well individually for each one of the components. Belle is built on principles that it should be easy to use and also have consistent behavior and design for both the developers and the end users interacting with it. The only thing that is limiting is that it has a lot less available components compared to other UI Kits, but the great news is this is currently being worked on by the core team. It also has support for mobile and ARIA and more than 2.3k stars on Github.
Blueprint UI is a React based UI toolkit that is optimized for building complex data-dense interface for desktop applications. With over 14k stars on Github and 56k weekly downloads on npm, it is a great UI kit to consider and it strives to provide accessibility standards with all of the components out of the box and comes bundled with light and dark theme mode. It has cross-browser support as it supports Chrome, Firefox, Safari, IE 11, and Microsoft Edge. Onedot and OnVoard are companies that currently use it.
Elemental UI is a toolkit that is created to solve real-world requirements in projects as well as to develop a set of functional components that are useful on their own or together, with an unobtrusive default style and flexible theme capabilities. Some of the components include forms, buttons, cards, and modals. The project is still under development but already has over 4k+ stars on GitHub and 4k weekly downloads on npm and it is available for use under the MIT license. Utry and Vacalians are examples of companies currently using it according to Stackshare.
Fabric is a React-based front-end framework for building experiences for Microsoft products, including Office and Office 365. It is a collection of robust UI components designed to make it simple for you to create consistent web experiences using the Office Design Language. It provides robust, up-to-date, accessible, and open-source components which are highly customizable using CSS-in-JS. With over 5k stars on GitHub and 92k weekly downloads on npm, it is a UI kit to keep tabs on for building great web experiences.
Grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package, and it is built to be mobile-first, responsive, and accessible for the web. With 4k+ stars on GitHub and 61k weekly downloads on npm, it is actively used by companies like Twilio, HP, Samsung and a host of other companies.
Prime React is an open source UI kit for React. It’s released under the MIT license, and it comprises of over 70+ easy to use components to try out. With 1k+ stars on GitHub and 9k+ weekly installs on npm, it is used by American Express, FOX, SAP, and other great organizations.
Reakit is a UI toolkit for building accessible rich web apps and design systems with React. It offers a set of components that allow you to rapidly put together a wide variety of UIs in React, which makes it great for everything from rapid prototyping to production. Reakit strictly follows WAI-ARIA 1.1 standards and provides many of the widgets described in WAI-ARIA Authoring Practices 1.1, like button, dialog, tab, and others. With over 3k star count on GitHub and 3k+ weekly downloads on npm, It is built with principles that make it consistent throughout the development process and actively supports accessibility standards.
Rebass is a UI kit and design system built with styled-system, and it contains only eight foundational components all in a super-small file weighing only ~1KB. The components are responsive and themable and made for responsive web design with support for Flexbox and Grid layouts. This project currently has over 5k star count on Github.
Shards React is a modern React UI toolkit with dozens of high-quality custom components. It is built based on Bootstrap 4. Shards React is made from scratch while following recent development best practices to optimize fast performance, and it is also a lightweight library with the stylesheets weighing only ~12kb minified and gzipped.
React UI kits allows us to build react applications with unique sets of UI components and with the copious amount of UI kits available to choose from that makes for better development workflow. In this article, we have seen a list of React UI kits to try out and integrate into our React projects to build themeable and customizable applications. Let me know in the comment section if there are any other React UI kits not listed here that you have tried.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how the call stack, event loop, and various queues help JavaScript handle asynchronous operations while maintaining its single-threaded nature.
Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.
null, undefined, or empty values in JavaScriptIn most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?
Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.
4 Replies to "An overview of the top 10 React UI kits in 2019"
No Ant design? Or even Material UI?
You may not know React Suite, so recommend it.
https://github.com/rsuite/rsuite
https://rsuitejs.com/
Atlas kit doesn’t count at all.
A picture is worth a thousand words. . . and they used thousands of words to define the picture instead of just showing a sample
. . . like all the other libraries listed here. Hard Pass.
Because everyone already knows about them. Since you already know about them, you don’t need to read a 2 paragraph review about them.