headless UI
Headless UI separates reusable interaction behavior from a particular visual presentation.
Use this when Several screens need the same control behavior with different markup or styling.
without the term
“We need the same dropdown behavior in three places with totally different designs. Can we reuse the logic, keyboard and all, but style each one differently?”
with the term · How do you ask a model for headless UI?
Reuse this headless control behavior with our components. Verify both presentations preserve keyboard interaction, focus, and accessible relationships.
What is headless UI?
A headless library supplies the keyboard, focus, and state behavior of a control such as a combobox and leaves the markup and styles to you. The rendered markup still has to keep the accessibility attributes.
Why does headless UI matter when vibe coding?
Copying the behavior into each design creates divergent fixes and edge cases.
How do you do headless UI?
Share the behavior and render two concrete presentations against its contract.
What goes wrong with headless UI?
Replacing semantic controls with decorative elements while retaining only visual behavior.