Headless Components: Separate Logic from UI

A Headless Component separates a component's complex logic—like state, keyboard navigation, and accessibility—from its visual presentation. It provides the 'brain' but leaves the 'looks' up to you. This pattern shines when you need to reuse behavior across multiple visual variations, like a dropdown that looks different in the header versus a form but must handle async data identically. The footgun is assuming it's a pre-styled, drop-in solution; you are responsible for rendering the entire UI, which is more initial effort.