How to Build a Universal Design System
summary
A universal design system for iOS, Android and Web that ships 42 components and runs from a single monorepo, used in the Showtime app in production. It integrates Expo, Next.js, solito, moti, reanimated; styling uses Tailwind now with plans for tailwindcss-react-native and typographic sizing via capsize. Complex UI patterns render natively (iOS form sheet), as centered dialogs on large screens and as swipeable bottom sheets on mobile via a withModalScreen HOC; components are published on npm and Bit and shown in Storybook.
AI-written summary · about
chapters (13)
- 0:00Intro
- 1:20How it started
- 3:18What is a design system
- 3:40Why do I need a design system
- 5:22How to build a universal design system
- 5:52What is universal
- 8:54Monorepo
- 13:20Github
- 15:20Tailwind
- 16:57Universal UI
- 18:24Live Demo
- 23:02Roadmap
- 26:34Advice
related talks
21mEstablishing the rules for a universal design system
01h 14mHow to Build a Cross-Platform Design System in React
20mDesign Systems for the Rest of Us
06mLightning talk: Design System - Modular component model
29mCreating universal design systems across web and mobile with Utility First Styling
36mCross-platform DS in React Native: Musixmatch’s case study
41mBuilding a design system with React in 2025, what's new?
26mUniversal Components & Deterministic Rendering