Compound Components

A compound component is one public component made of several parts that share state implicitly. Instead of a monolith driven by a fat config prop, you expose a set of parts — Tabs.Item, Sidebar.Group, WizardCard.Provider — and let the consumer arrange them. The parts talk to each other through React context, so the consumer never wires the shared state by hand. At scale this is the composer pattern: a Provider part holds the shared surface and a dozen presentational parts read from it.

Reach for this when a component has multiple parts that coordinate (a tab strip and its tabs, a card and its image/title/price) or when consumers need to interleave their own markup between the parts. It's the antidote to the items={[…]} + renderItem config monolith, which forces every new layout need into a new prop.