Design Decisions for the Components Library

on YouTube ↗28m

" summary

The team ends up with three component libraries instead of one and justifies it with specific fixes: they move to separate npm packages, write a custom Babel plugin to inject CSS Modules build info into JS, patch postcss custom properties to avoid global variable collisions (IE fallback via duplicated rules), and enforce singleton packages for things like React context by making them peer/dependencies. They add per-package tsconfig generation for publishing, replace styleguidist with a Next.js+MDX docs engine, introduce Xian helpers for isolated stylistic utilities, and support ~10 internal teams.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 8:04Components library- Design system
3. 8:20Requirements for v2 (The Design System)
4. 13:41Singleton packages
5. 20:40Fundamental issues
6. 21:57Requirements for v3
7. 26:34Current stack (v3)

" related talks

• 25mFrom Design Systems to Component LibrariesGagik Arustamyan | ReactConfAM19 · React Conf Armenia 2019
• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 44mBest Practices on building a UI component library for your companyDavid Wells · Full Stack Fest 2016
• 26mLearnings from building a component libraryThomas Pink, Fabian Friedl · NG-DE Conference 2019
• 46mBuilding Reusable Components ... That Are Actually ReusableCory House · Connect.Tech 2021
• 24mDesigning Components for Fun, Profit and SanityYishu See · JSConf.Asia 2019
• 31mBuilding Component Library from ScratchSandro Dolidze · JS Conf Armenia 2021
• 21mShared Components Beyond the Design SystemJonathan Keslin · CascadiaJS 2026