Losing your Components’ Head

on YouTube ↗17m

" summary

Claim: separate behavior from rendering so UI adapts without refactoring. Shows a working React demo that implements a tabs system with a context controller and small pieces — Tabs, TabList, TabPanel — using accessibility roles, hiHidden, onSelected change and orientation-aware flex layout. Notes real libraries that follow the pattern and were used or cited: Headless UI, Radix, MUI base, Quick UI. Demonstration finishes in about 15 minutes and the composed component works as described.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 2:12Separation of concerns
3. 5:50Headless components explained
4. 7:19Tabs component breakdown
5. 9:15Tabs structure
6. 11:22Behavior with context
7. 13:55Adaptive UI composition
8. 15:20When to use headless

" related talks

• 20mLosing your Components’ HeadGil Fink · XtremeJS 2024
• 18mOff with Their Heads: Rise of the Headless ComponentsOmry Nachman · React Summit 2023
• 35mBuilding reusable UI libraries with ReactCassidy Williams · Agent Conf 2020
• 25mSimply ReactKent C. Dodds · React Rally 2018
• 30mComposable components using React ContextDanail Hadjiatanasov · JSWorld Conference 2021
• 40mBuilding Accessible Reusable ComponentsSiddharth Kshetrapal · JSHeroes 2024
• 23mBest Practices for reusable UI componentsMars Jullian · Nordic.js 2017
• 52mA11y with React ComponentsRussell Skaggs · JavaScript and Friends Conference 2020