Chapter 18

18 — Compound Components

Compound components are a pattern where multiple components work together to form a complete UI, sharing implicit state. Think <select> + <option> in HTML.

The Pattern

&lt;Accordion&gt;
  &lt;Accordion.Item value="faq1"&gt;
    &lt;Accordion.Trigger&gt;Question 1&lt;/Accordion.Trigger&gt;
    &lt;Accordion.Content&gt;Answer 1&lt;/Accordion.Content&gt;
  &lt;/Accordion.Item&gt;
&lt;/Accordion&gt;

Why?

Without	With Compound Components
Giant config prop `<Tabs items={[...]}`	Declarative composition
Hard to customize individual items	Full control over each child
Rigid API	Flexible, composable API
Tight coupling	Loose coupling

Approaches

Approach	Mechanism	Flexibility
Context-based	`createContext` + Provider	Most flexible, any nesting depth
`React.Children`	Iterate/clone children	Only direct children

File

compound.tsx — Tabs, Accordion, Menu, Toggle Group — all using compound component pattern with Context

Previous17 — Data Fetching Patterns Next 04 — React Testing Library