Building UI Toolkits With React

Articles & Tutorials

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
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

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

@appbaseio/reactivesearch (opensource.appbase.io)2912
v3.0.0-rc.17
Jul 01, 2019
A React and React Native UI components library for Elasticsearch
  • Deepak Grover
  • Divyanshu Maithani
  • Dhruvdutt Jadhav
react-native-ui-kitten (akveo.github.io)3597
v4.0.5
Jun 28, 2019
Customizable and reusable react-native component kit.
  • Alexander Demeshko
  • Artur Yorsh
  • Alexei Malashkevich
office-ui-fabric-react (developer.microsoft.com)4476
v7.6.2
Jun 28, 2019
React components for building experiences for Office and Office 365
reakit (reakit.io)1573
v1.0.0-beta.4
Jun 27, 2019
Toolkit for building interactive UIs with React
  • Diego Haz
primereact (primefaces.org)855
v3.1.7
Jun 25, 2019
PrimeReact is a rich set of open source UI Components for React.
  • Mert Sincan
  • Cagatay Civici
  • Merve Özçifçi
  • Mertcan Diken
@material-ui/core (material-ui.com)44577
v4.1.3
Jun 25, 2019
React components that implement Google's Material Design
  • Olivier Tassinari
  • Hai Nguyen
  • Matt Brookes
carbon-components-react (react.carbondesignsystem.com)783
v7.3.2
Jun 24, 2019
React components for the Carbon Design System.
  • Akira Sudoh
  • Josh Black
gestalt (pinterest.github.io)3040
v0.99.0
Jun 21, 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.16.2
Jun 21, 2019
A React-based UI toolkit for the web
  • Gilad Gray
  • Chris Lewis
  • Antoine Llorca
  • Adi Dahiya
react-native-ui-lib (z448401921.github.io)1514
v3.29.0
Jun 19, 2019
UI Components Library for React Native
  • Ethan Sharabi
  • Inbal Tish
  • Wix
@shoutem/ui (shoutem.github.io)4099
v0.24.1
Jun 18, 2019
Shoutem UI toolkit enables you to build professionally looking React Native apps with ease.
  • Luka Bracanović
  • Željko Rumenjak
@progress/kendo-react-common (telerik.com)
v3.2.2
Jun 15, 2019
Native UI and Data Visualization Components for React.
    semantic-ui-react (react.semantic-ui.com)9251
    v0.87.2
    Jun 14, 2019
    The official Semantic-UI-React integration
    • Levi Thomason
    • Oleksandr Fediashov
    rsuite (rsuitejs.com)2517
    v3.8.6
    Jun 06, 2019
    React Suite is a set of react component libraries for enterprise system products.
    • Simon Guo
    @syncfusion/ej2-react-base (syncfusion.com)68
    v17.1.50
    Jun 04, 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.
      react-md (react-md.mlaursen.com)1961
      v1.12.1
      Jun 01, 2019
      A set of React components and sass files for implementing Google's Material Design.
      • Mikkel Laursen
      react-bootstrap (react-bootstrap.github.io)15007
      v1.0.0-beta.9
      May 31, 2019
      Bootstrap components built with React.
      • Jimmy Jia
      • Alexander Shemetovskiy
      • Jason Quense
      • Stephen J. Collings
      • Matt Smith
      • Pieter Vanderwerff
      material-ui-layout (material-ui-layout.origen.studio)37
      v4.0.0-rc.5
      May 31, 2019
      Declarative layout for Material UI.
      • Pol Guixé
      • Oscar Chic
      evergreen-ui (evergreen.segment.com)7561
      v4.17.0
      May 29, 2019
      Evergreen React UI Framework by Segment.
      • Jeroen Ransijn
      • Roland Warmerdam
      rebass (rebassjs.org)4986
      v3.1.1
      May 29, 2019
      React primitive UI components built with styled-system
      • Brent Jackson
      grommet (grommet.io)4524
      v2.7.1
      May 24, 2019
      A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
      • Eric Soderberg
      • Alan Souza
      react-native-web (necolas.github.io)12875
      v0.11.4
      May 22, 2019
      React Native for Web
      • Nicolas Gallagher
      @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é
      reactstrap (reactstrap.github.io)7336
      v8.0.0
      Apr 04, 2019
      Simple React Bootstrap 4 components
      • Eddy Hernandez
      • Evan Sharp
      native-base (nativebase.io)11540
      v2.12.1
      Mar 08, 2019
      Essential cross-platform UI components for React Native
      • Sankhadeep Roy
      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