Building UI Toolkits With React

Articles & Tutorials

Using Material UI in React Native (blog.logrocket.com)
Apr 26, 2021
The heavy hitter of Material Design component libraries on React Native is react-native-paper, and this guide will focus on using react-native-paper to set up a starter app with the some of the most prominent and recognizable Material Design features: Hamburger Menu, Drawer Navigation, FAB (Floating Action Button), and Contextual Action Bar.
  • Farhan Kathawala
Comparing React Native UI libraries (blog.logrocket.com)
Mar 22, 2021
In this guide, we’ll compare 10 of the most-used UI libraries for React Native.
  • Said Hayani
Using React Native Elements, a cross-platform UI toolkit (blog.logrocket.com)
Mar 16, 2021
In this tutorial, we’ll go over the basics of using React Native Elements.
  • Clayton Francis
Using Grommet In React Applications (smashingmagazine.com)
Jan 18, 2021
In this tutorial, we’re going to learn how to use Grommet as a UI library for React applications. We’ll use Grommet as a UI library of choice to create a pricing component, this would help us have a better understanding of how to use Grommet.
  • Fortune Ikechi
Building an Ecommerce Operational Dashboard in React (telerik.com)
Oct 26, 2020
We will be constructing an Operational Dashboard in React for an ecommerce store, utilizing a number of charts and components from KendoReact.
How to Use Chakra UI with Next.js and React (freecodecamp.org)
Oct 20, 2020
Building websites and applications is hard. There are a lot of things to consider to make sure our apps are usable and accessible including how our React components work.
  • Colby Fayock
Accessible components with Reakit (blog.logrocket.com)
Oct 05, 2020
The most common thing in a React application is the reusability of components. We have been using and reusing the same components in different parts of an application and this is one of the most fantastic features that we have in React applications.
  • Leonardo Maldonado
Getting Started with Adobe’s React Spectrum (blog.bitsrc.io)
Aug 19, 2020
React Spectrum is a collection of libraries authored by Adobe Team to help developers build a feature-rich application with React. It has three main libraries that you can use together or separately as you see fit.
  • Nathan Sebhastian
Richer, more accessible UIs with React Spectrum (blog.logrocket.com)
Aug 11, 2020
In mid-July, Adobe announced the release of React Spectrum, a collection of tools for building adaptive, accessible, and rich user experiences. At its core, React Spectrum is composed of three main parts.
  • Yusuff Faruq
A Practical Guide To Product Tours In React Apps (smashingmagazine.com)
Aug 06, 2020
In the following guide, you’ll learn how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app.
  • Blessing Krofegha
Getting started with Microsoft Fluent UI React (c-sharpcorner.com)
May 07, 2020
Have you ever wanted to create a User Interface similar to Microsoft products? Have you heard about Microsoft Fluent UI? In this article, we will see what Fluent UI is and how to integrate it in the React application.
  • Sumit Kharche
An Introduction To React With Ionic (smashingmagazine.com)
May 04, 2020
Mobile app development using hybrid frameworks has come a long way since initial release in 2008. With the improvements being made to the JavaScript engine and improved processing power available to mobile phones, the major concern people had when they considered developing their apps using the hybrid approach — namely, performance — has all but been eliminated, and cross-platform frameworks have seen a surge in popularity.
  • Jerry Navi
Styled System Revisited (varun.ca)
Apr 19, 2020
Much has changed in the world of Styled System since my last post. There are fewer packages to deal with; it is much more performant and has a more straightforward and powerful API.
  • Varun Vachhar
Create a Modular React Component Library (blog.bitsrc.io)
Mar 31, 2020
A guide to building a React component library that scales.
  • Eden Ella
How to Build a Modular React UI Library with Bit and Bit.dev (medium.com)
Mar 31, 2020
A guide to building a React component library that scales.
  • Eden Ella
Comparing React admin panel templates (blog.logrocket.com)
Mar 06, 2020
In this guide, we’ll compare various admin panel templates for React. All these templates provide premium features and a lot of variations you can combine depending on your specific app requirements.
  • Gaurav Singhal
Top 10 React Component Libraries for 2020 (blog.logrocket.com)
Mar 05, 2020
In this post, we’ll take a look at the fastest growing React libraries over the past year as well as some of of their use cases.
  • Ogundipe Samuel
Setting Up Tailwind CSS In A React Project (smashingmagazine.com)
Feb 24, 2020
This article introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. You’ll also learn how to seamlessly set up Tailwind CSS in a React project.
  • Blessing Krofegha
A Look at the React Native Elements UI Toolkit (alligator.io)
Feb 03, 2020
React Native Elements is a styling library with pre-built components to replace the basic, limited React Native components. It’s similar to Bootstrap, giving you useable styles that are broad enough to customize as your own.
  • Stephen Hartfield
13 Top React Component Libraries for 2020 (blog.bitsrc.io)
Dec 23, 2019
Useful open-source React UI libraries you should know in 2020
  • Fernando Doglio
Exploring the Chakra UI React Component Library (alligator.io)
Dec 23, 2019
Despite my love for Tailwind CSS over other frameworks, I have always been disappointed by the lack of components like what we get with more fully fledged-out frameworks like Bootstrap and Materialize. I recently discovered the perfect solution to this problem: Chakra UI.
  • Joshua Hall
3 Ways to Build Your Own React Component Library (blog.bitsrc.io)
Nov 07, 2019
Component libraries are great resources when it comes to developing React-based applications. They allow you to logically group your components in a way that lets others in your team explore them and pick & choose the ones they need.
  • Fernando Doglio
Ionic React - First Look (dev.to)
Oct 17, 2019
Ionic now officially supports React as a first-class target & framework.
Announcing Ionic React (ionicframework.com)
Oct 14, 2019
Today we’re thrilled to announce the general availability of Ionic React, a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App.
  • Max Lynch
Component Development with Storybook and KendoReact (telerik.com)
Jul 23, 2019
Storybook provides a great environment for experimenting with UI components in isolation and through a variety of different configurations. In this article, I'll show you how to get started with Storybook, highlight a few add-ons, and showcase a Storybook built for KendoReact.
  • John Bristowe
How to configure Create-React-App to use TailwindCSS (blog.logrocket.com)
Jul 23, 2019
Recently, I tried using TailwindCSS in a React project bootstrapped by the Create-React-App (CRA) boilerplate and ran into difficulties setting up TailwindCSS as CRA abstracts configuration.
  • Anjolaoluwa Adebayo-Oyetoro
How we built a component library that people actually enjoy using (medium.com)
Jun 26, 2019
Sprout Social’s design system, Seeds, has done a lot of growing up since it launched in October of last year. When we launched, our system was home to four categories of guidelines and principles: Brand, Visual, Writing, and Product. A healthy showing, for sure, but something was suspiciously missing — components.
  • Chase McCoy
Discovering React Hooks with KendoReact (telerik.com)
May 01, 2019
React Hooks have been available for use since the React 16.8 release. We'll learn how we can start applying these Hooks by using our KendoReact components.
  • Eric Bishard
Using React Hooks in Ionic React (blog.ionicframework.com)
Apr 30, 2019
We were excited to see how hooks can make common app building tasks and accessing native APIs really easy and clean, and wanted to walk through the new Hooks APIs in the context of an Ionic React app.
  • Max Lynch
Where Does Ionic React Fit in the React Ecosystem? (blog.ionicframework.com)
Apr 02, 2019
A few weeks ago, we announced the beta of our official React support, making it possible for developers to build quality apps for mobile, desktop, and the web using React and standard web development techniques.
  • Max Lynch
Announcing the Ionic React Beta (blog.ionicframework.com)
Feb 21, 2019
Today, we’re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React.
  • Josh Thomas
Building a UI Component Library with Styled Components (medium.com)
Feb 12, 2019
Don’t repeat yourself. It’s a principle that engineers strive to adhere to — preventing code duplication by abstracting shared functionality out into its own place.
  • Lee Robinson
The definitive guide to React Material (blog.logrocket.com)
Jun 06, 2018
Material Design is a design language that was first introduced by Google in 2014. It’s a visual language that makes use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
  • Yomi Eluwande
Component Based Design System With Styled-System (varun.ca)
May 11, 2018
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design constraints. It builds upon ideas such as Atomic Design, Style Guides and Component-Based Architecture.
  • Varun Vachhar
React Native UI Toolkit Roundup (alligator.io)
Aug 07, 2017
Until someone makes react-native-bootstrap (which does not exist yet, by the way), here are a number of other React Native UI Toolkits that you can use to bootstrap (get it?) your next React Native project
  • Conroy Whitney

Video Guides & Talks

React Material-UI Themes: Customize Material Components for your Project (youtube.com)
Jun 24, 2020
In this video, we will have a look at how you can customize react material-ui to align with your company identity (design system) and products.
  • Bruno Antunes
The Ionic Show // Episode 11 // Ionic React (youtube.com)
Aug 20, 2019
In this episode of the Ionic Show, Max and Ben hand the hosting reigns over to none other than 'Wisdom Beard' himself, Mike Hartington, with guests Adam Bradley, Josh Thomas, and Ely Lucas to talk all things Ionic React! Here's what they covered:
  • Mike Hartington
  • Adam Bradley
  • Josh Thomas
  • Ely Lucas
A Common Design Language Let Designers and Developers talk to each other (youtube.com)
May 01, 2019
“Should designers code?” or “Should coders design?”—these two eternal questions are being asked for years with no particular answer given.
  • Andrey Okonetchnikov
How to use Ionic with React (youtube.com)
Apr 25, 2019
Mike Hartington teaches us how to use the Ionic framework with React.
  • Jason Lengstorf
  • Mike Hartington
A Common Design Language. Let Designers and Developers talk to each other (youtube.com)
Apr 24, 2019
“Should designers code?” or “Should coders design?”—these two eternal questions are being asked for years with no particular answer given.
  • Andrey Okonetchnikov

Courses & Video Series

React for Design (react.design)
Feb 11, 2019
This is a course built specifically for designers looking to use React for interface design.
  • Philip Davis

Libraries

reakit (reakit.io)1573
v1.0.0-beta.5
Aug 12, 2019
Toolkit for building interactive UIs with React
  • Diego Haz
react-bootstrap (react-bootstrap.github.io)15007
v1.0.0-beta.11
Aug 10, 2019
Bootstrap components built with React.
  • Jimmy Jia
  • Alexander Shemetovskiy
  • Jason Quense
  • Stephen J. Collings
  • Matt Smith
  • Pieter Vanderwerff
react-native-web (necolas.github.io)12875
v0.11.6
Aug 10, 2019
React Native for Web
  • Nicolas Gallagher
@material-ui/core (material-ui.com)44577
v4.3.2
Aug 10, 2019
React components that implement Google's Material Design
  • Olivier Tassinari
  • Hai Nguyen
  • Matt Brookes
grommet (grommet.io)4524
v2.7.5
Aug 10, 2019
A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
  • Eric Soderberg
  • Alan Souza
@appbaseio/reactivesearch (opensource.appbase.io)2912
v3.0.0-rc.23
Aug 09, 2019
A React and React Native UI components library for Elasticsearch
  • Deepak Grover
  • Divyanshu Maithani
  • Dhruvdutt Jadhav
office-ui-fabric-react (developer.microsoft.com)4476
v7.22.1
Aug 09, 2019
React components for building experiences for Office and Office 365
react-native-ui-lib (z448401921.github.io)1514
v3.34.3
Aug 07, 2019
UI Components Library for React Native
  • Ethan Sharabi
  • Inbal Tish
  • Wix
rebass (rebassjs.org)4986
v4.0.2
Aug 07, 2019
React primitive UI components built with styled-system
  • Brent Jackson
@syncfusion/ej2-react-base (syncfusion.com)68
v17.2.40
Aug 06, 2019
The Syncfusion React UI components library is the only suite that you will ever need to build an application since it contains over 60 high-performance, lightweight, modular, and responsive UI components in a single package.
    rsuite (rsuitejs.com)2517
    v3.8.8
    Aug 01, 2019
    React Suite is a set of react component libraries for enterprise system products.
    • Simon Guo
    gestalt (pinterest.github.io)3040
    v0.101.0
    Aug 01, 2019
    A set of React UI components that supports Pinterest’s design language
    • Peter Farejowicz
    • Christian Vuerings
    • Chris Lloyd
    @blueprintjs/core (blueprintjs.com)13335
    v3.18.0
    Jul 30, 2019
    A React-based UI toolkit for the web
    • Gilad Gray
    • Chris Lewis
    • Antoine Llorca
    • Adi Dahiya
    material-ui-layout (material-ui-layout.origen.studio)37
    v4.0.0-rc.9
    Jul 26, 2019
    Declarative layout for Material UI.
    • Pol Guixé
    • Oscar Chic
    native-base (nativebase.io)11540
    v2.13.4
    Jul 26, 2019
    Essential cross-platform UI components for React Native
    • Sankhadeep Roy
    primereact (primefaces.org)855
    v3.1.8
    Jul 25, 2019
    PrimeReact is a rich set of open source UI Components for React.
    • Mert Sincan
    • Cagatay Civici
    • Merve Özçifçi
    • Mertcan Diken
    @shoutem/ui (shoutem.github.io)4099
    v1.0.1
    Jul 24, 2019
    Shoutem UI toolkit enables you to build professionally looking React Native apps with ease.
    • Luka Bracanović
    • Željko Rumenjak
    react-md (react-md.mlaursen.com)1961
    v1.12.2
    Jul 19, 2019
    A set of React components and sass files for implementing Google's Material Design.
    • Mikkel Laursen
    carbon-components-react (react.carbondesignsystem.com)783
    v7.4.1
    Jul 16, 2019
    React components for the Carbon Design System.
    • Akira Sudoh
    • Josh Black
    reactstrap (reactstrap.github.io)7336
    v8.0.1
    Jul 11, 2019
    Simple React Bootstrap 4 components
    • Eddy Hernandez
    • Evan Sharp
    evergreen-ui (evergreen.segment.com)7561
    v4.18.1
    Jul 10, 2019
    Evergreen React UI Framework by Segment.
    • Jeroen Ransijn
    • Roland Warmerdam
    react-native-ui-kitten (akveo.github.io)3597
    v4.1.0
    Jul 10, 2019
    Customizable and reusable react-native component kit.
    • Alexander Demeshko
    • Artur Yorsh
    • Alexei Malashkevich
    semantic-ui-react (react.semantic-ui.com)9251
    v0.87.3
    Jul 09, 2019
    The official Semantic-UI-React integration
    • Levi Thomason
    • Oleksandr Fediashov
    @progress/kendo-react-common (telerik.com)
    v3.2.2
    Jun 15, 2019
    Native UI and Data Visualization Components for React.
      @smooth-ui/core-sc (smooth-ui.smooth-code.com)1155
      v10.1.0
      May 04, 2019
      Modern React UI library. Code less, do more.
      • Greg Bergé
      react-native-elements (react-native-training.github.io)15309
      v1.1.0
      Feb 25, 2019
      Cross Platform React Native UI Toolkit
      react-foundation (react.foundation)505
      v0.9.6
      Aug 20, 2018
      Foundation as React components.
      • Christoffer Niska
      material-kit (demos.creative-tim.com)4957
      v2.0.4
      Jul 02, 2018
      Free and Open Source UI Kit for Bootstrap 4, React, Vue.js, React Native and Sketch based on Google's Material Design.
      • Alex Paduraru
      react-native-material-ui (github.com)2671
      v1.30.1
      Jul 02, 2018
      Highly customizable material design components for React Native
      • Jiri Otahal
      • Jan Ziemba
      nachos-ui (avocode.com)1793
      v0.2.0-beta.1
      Jun 12, 2018
      Nachos UI is a React Native component library
      • Petr Brzek
      • Matt Apperson
      react-toolbox (react-toolbox.io)8344
      v2.0.0-beta.13
      Jun 02, 2018
      A set of React components implementing Google's Material Design specification with the power of CSS Modules
      • Javi Velasco
      react-native-material-kit (xinthink.github.io)4263
      v0.5.1
      Nov 11, 2017
      Bringing Material Design to React Native
      • Yingxin Wu
      belle (nikgraf.github.io)2367
      v4.0.0
      Oct 11, 2017
      Configurable React Components with great UX.
      elemental (elemental-ui.com)4219
      v0.6.1
      Aug 04, 2016
      A UI Toolkit for React.js Websites and Apps
      • Joss Mackison
      • Jed Watson