Compound components

Compound components split one UI pattern into named parts — `Tabs`, `Tabs.List`, `Tabs.Panel` — that share implicit state through context. Consumers arrange markup flexibly while the parent coordinates selection, ids, and keyboard behavior.

The API stays declarative: users compose pieces instead of configuring every detail via props. Implementation typically uses context plus cloned children or explicit subcomponents. Accessibility wiring (roles, roving tabindex) often lives in the parent shell.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Shared state via context between parts.
• Declarative layout for consumers.
• Centralize a11y behavior in the coordinator.