Components that work together
A compound component is a parent that exposes child subcomponents designed to be used together, like a tab list with its tabs and panels. The parent holds shared state and passes it to children implicitly, usually through context, so the consumer arranges markup freely without wiring every prop.
- The parent owns the shared state such as the active item.
- Children read that state through a shared context.
- The consumer composes the pieces in any layout.
Why it reads cleanly
Instead of a single component with dozens of configuration props, the consumer writes nested elements that mirror the structure. This keeps the api expressive and lets you reorder or omit parts without changing the parent.
- It avoids a long list of boolean and slot props.
- It lets consumers control structure and ordering.
- It keeps the shared state hidden inside the group.
The tradeoff is that children only make sense inside their parent, which the context dependency enforces.
Key idea
Compound components share implicit state through context so a parent and its named children compose flexibly without prop drilling.