Off with Their Heads: Rise of the Headless Components
summary
Claims that separating behavior from markup shrinks late-stage redesign risk and reduces rewrites, demonstrated by replacing a bespoke menu (Ant Design) in a Google Docs–style editor, using concrete libraries Radix, React Aria and react-table and an internal headless library from codex (open Beta since Christmas). Shows hook- and component-style APIs, how props/getters map into views, and that mixing headless and full components works in production, preserves separation of concerns, and saves development time and sleep while exposing a gap: missing headless “daily drivers” like advanced forms and galleries.
AI-written summary · about
chapters (13)
- 0:00Headless components intro
- 1:56Why components are great
- 3:01Customizability wall in libraries
- 4:46Demo of customizability problem
- 7:19What headless components are
- 8:23Component vs hook-based APIs
- 8:44Radix UI headless example
- 10:35React Aria hook-based example
- 12:03React Table headless approach
- 14:13When to choose headless
- 15:58Lessons from Codex
- 17:03Market gap in headless
- 17:46Closing remarks & Q&A
related talks
20mLosing your Components’ Head
17mLosing your Components’ Head
24mDesigning Components for Fun, Profit and Sanity
28mHow to View and React without a Head
51mBuilding Better Components — A Journey to a More Resilient Frontend
24mCode crimes for good component APIs
26mHow to View and React without a Head
46mBuilding Reusable Components ... That Are Actually Reusable