Compound Components & Headless Patterns
Compound components allow several components to cooperate through shared context or controlled state. Examples include Tabs, Accordion, Select, and Menu systems.
A headless component separates behavior and accessibility from visual styling. Consumers provide the presentation while the component manages interaction semantics.
These patterns are powerful but can be overused. If a simple prop-based component solves the problem, prefer the simpler API.
Compound tabs concept
<Tabs>
<Tabs.List>
<Tabs.Tab value="overview">Overview</Tabs.Tab>
<Tabs.Tab value="activity">Activity</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="overview">...</Tabs.Panel>
</Tabs>💡 Compound APIs express relationships clearly while allowing the parent Tabs component to coordinate state.
Key Takeaways
- Compound components express coordinated behavior.
- Headless components separate behavior from presentation.
- Use advanced patterns when they reduce, rather than increase, consumer complexity.