What is the Compound Components pattern, and how does it build flexible, complex UI components?

Short answer

It lets a group of components work together and share state implicitly through internal Context, giving users full freedom to arrange and customize an interface such as Tabs or Select.

Explanation

Instead of one large component with dozens of props for every button and icon, Compound Components divide the UI into small parts (Tabs.List, Tabs.Tab, Tabs.Panel). The parts share state through hidden React Context, providing a flexible API similar to native HTML elements such as <select> and <option>.

Code example

// Use the compound component cleanly
function App() {
  return (
    <Tabs defaultValue="tab1">
      <Tabs.List>
        <Tabs.Tab value="tab1">Profile</Tabs.Tab>
        <Tabs.Tab value="tab2">Security</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="tab1">User data...</Tabs.Panel>
      <Tabs.Panel value="tab2">Password settings...</Tabs.Panel>
    </Tabs>
  );
}

Common mistakes

• Extracting children with React.Children.map, which breaks composition if a child component is wrapped in an intermediate div, instead of using Context.

Follow-up questions

• What is the Render Props pattern, and how is it used today?

Sources

• React docs — Passing Data Deeply with Context
• patterns.dev — Compound Pattern