Building Design Systems With React

Articles & Tutorials

The Modern Front-End Design System Stack (
Jul 18, 2019
Design systems come in all shapes and sizes and can encompass a wide range of skillsets and roles within an organization. As a front-end developer, I'd like to share some of the tooling that I've found to be helpful when building out the components and code portion of a design system in modern applications.
  • Brent Jackson
How we built a component library that people actually enjoy using (
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
Introducing Base Web, Uber’s New Design System for Building Websites in React (
Apr 16, 2019
Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system.
  • Nadiia Dmytrenko
  • Chase Starr
  • Gergely Nemeth

Video Guides & Talks

Design systems and MDX in Gatsby (
Aug 16, 2019
Creating design systems with great documentation and examples can be a pain. MDX makes it far less painful — on this episode, Kathleen McMahon joins to teach us how to create excellent documentation for a design system using MDX and Gatsby.
  • Jason Lengstorf
  • Kathleen McMahon
Scalable Design Systems with TypeScript (
May 01, 2019
This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.
  • Tejas Kumar
A practical guide to building your design system infrastructure (
May 01, 2019
This practical guide shows how to apply existing development tools to your system and what is the value you can get.
  • Varya Stepanova
Designing with React (
Apr 24, 2019
In this talk, we'll look at the current state of design and development, and where we could go—if we're willing to push for it.
  • Mark Dalgleish
Secrets to a Successful Design System (
Dec 17, 2018
In this talk, you'll learn how to pitch a design system to your boss, rarely discussed technical caveats and challenges, and how to set your design system up for success from the start.
  • Monica Lent
Nordic.js 2018 - Building a Design System in React (
Dec 12, 2018
This talk will take you through our journey to Polaris. An overview of what a design system is, why you would want one, and how we built ours at Shopify. I will give you a behind the scenes look into the technologies and patterns we used to build the system. React, TypeScript, CSS modules, markdown, and how they all come together to build something that both designers and developers will enjoy using.
  • Dominic McPhee
We Need To Talk About Our Frontend Workflow (
Mar 20, 2018
Building high quality interfaces that are consistent across products is hard. Fear not, Design Systems with React is the solution!

Courses & Video Series

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

Podcast Episodes

Design Systems with Varya Stepanova (
Jul 02, 2019
Varya talks about how a component library turns into a design system and shares some of her experience. She talks about how the concepts in a design system are influenced and created by the existing interface.
Style Guides in React with Sara Vieira (
Jan 22, 2019
John and Dan are joined by Sara Vieira to discuss the benefits of creating style guides for the apps you're building in React.


antd (
Aug 09, 2019
An enterprise-class UI design language and React implementation.
  • Benjy Cui
  • Wei Zhu
styled-system (
Aug 08, 2019
Responsive, theme-based style props for building design systems with React.
  • Brent Jackson
  • John Otander
evergreen-ui (
Jul 10, 2019
Evergreen React UI Framework by Segment.
  • Jeroen Ransijn
  • Roland Warmerdam