Atomic Design: Breaking Up is Hard to Do
summary
Argues that Atomic Design breaks under real‑world complexity and demonstrates a React implementation using Context, useState/useRef/useEffect, and Tailwind to build working components instead of abstractions: a tabs component with keyboard navigation (provider + registerTrigger pattern) and a card system that uses a mapChildren clone by type to position badges and images. Cites a component with 58 props as motivation, shows Figma → code live coding, claims Compound Components reduce prop drilling and breaking changes while admitting harder debugging and a steeper learning curve.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 3:13Atomic design
- 6:43Atomic design limits
- 11:49Lessons from atomic design
- 13:32Compound components
- 17:56Tabs component
- 20:54Keyboard navigation
- 22:22Benefits and challenges
- 23:28Schiphol card case study
- 28:47Conclusion and key takeaways
related talks
32mAtomic Design Theory in Practice
18mAtomic Design as a Migration Strategy
37mIs Atomic Design Dead?
44mAtomic Design and Storybook to Boost Frontend Dev Productivity
40mAtomic Design Software Architecture Illustrated with Angular 2
24mAtomic Design : A recipe for success
07mReact components, atomic design and storybook
44mWriting good components