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
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
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
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
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 React
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
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
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
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
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
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.
Conclusion
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.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free.
