Building a Design System in React
summary
Shopify builds Polaris as a React component library with TypeScript, CSS modules, markdown docs and design tokens, used across 600,000 merchants and a 3,000+ employee company. The repo generates an interactive playground from typed prop comments, extracts static HTML/CSS for non‑React consumers, and enforces accessibility and API constraints exemplified by the Banner component with status union types. Evolution happens via weekly office hours, GitHub issues and bug‑bashes, plus an AppProvider using React context for custom link integration.
AI-written summary · about
chapters (28)
- 0:00Introduction
- 0:52Agenda
- 1:09What is a design system
- 2:37Systems of roads
- 3:51Documentation
- 4:29Content Guidelines
- 4:58Design Guidelines
- 5:26UI Components
- 5:54Accessibility
- 7:04How we built it
- 8:07Markdown
- 9:25Banner
- 10:56Props
- 11:43Action Interface
- 12:18Intersection Type
- 12:54Playground
- 13:59Readme Files
- 14:53sass
- 16:21CSS modules
- 16:51Class names
- 18:47React Router
- 19:30Evolving the System
- 20:34Office Hours
- 21:22Forking
- 22:33Bug Bash
- 23:08Road analogy
- 23:55Developer experience
- 24:27Outro
related talks
33mShopify Polaris: A Design System for Better Shopify App UX
41mBuilding a design system with React in 2025, what's new?
19mHarnessing React to Build Consistently Designed Applications
32mYour Guide to Making Scalable Design Systems
30mDesigning with React
45mDesign systems adventures with React and TypeScript
21mDesign Systems 101: The Developer Approach to Better Frontends
31mWhat goes into building a design system