system design
System Design: Component Library
Design a shared UI component library used by 10 product teams.
System Design: Component Library
The Problem
Design a shared React component library (design system) for a company with 10 product teams and 50 frontend engineers. Components should be consistent, accessible, and easy to adopt.
Architecture
Component library (npm package)
├── Primitives (Button, Input, Card, Modal)
├── Compositions (SearchBar, DataTable, Form)
├── Tokens (colors, spacing, typography)
├── Documentation (Storybook)
└── CI/CD (automated visual regression tests)Key Decisions
| Decision | Choice | Why |
|---|---|---|
| Styling | CSS custom properties + utility classes | Zero runtime cost, themeable |
| Accessibility | WCAG 2.1 AA built into every component | Not optional — legal requirement in EU |
| Versioning | Semantic versioning with changelogs | Teams can upgrade on their schedule |
| Documentation | Storybook with interactive examples | Engineers learn by playing, not reading |
| Testing | Visual regression (Chromatic) + unit tests (Testing Library) | Catch visual bugs before merge |
| Distribution | npm private registry | Standard tooling, tree-shakeable |
Adoption Strategy
Your design notes
Work through this problem yourself before reading the walkthrough above. Your notes are stored locally and not submitted anywhere — only sent to the AI when you click Review.