Losing your Components’ Head
summary
Claims that separating behavior, UI and data lets components survive rebrands; shows a concrete React implementation using a headless component pattern with a React context provider to hold selected state, orientation and callbacks. Builds a tabs component composed of tab, tablist, tabpanel parts, adds ARIA roles and hidden toggling, and swaps CSS modules to change look instantly. Demo works: horizontal/vertical modes and style variants switch with minimal code; notes compatibility with Material UI Base and other headless libs.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:52Design change problem
- 4:14Designers vs developers
- 7:04Headless component pattern
- 8:12Breaking tabs into parts
- 10:01Headless tabs component
- 12:32Behavior with React context
- 14:21Tab component implementation
- 15:50Tab panel component
- 17:17Adapting UI with headless
- 19:04Headless component libraries
- 20:06Summary & Q&A
related talks
17mLosing your Components’ Head
18mOff with Their Heads: Rise of the Headless Components
30mComposable components using React Context
35mBuilding reusable UI libraries with React
25mSimply React
23mBest Practices for reusable UI components
37mBuilding Better Components — A Journey to a More Resilient Frontend
44mWriting good components