The Compound Components Patternnnn

Building Flexible Component APIs

Compound components let you create expressive, declarative APIs for complex UI patterns. Think of how HTML select and option work together.

Building a Tabs Component

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Account content</Tabs.Content>
  <Tabs.Content value="tab2">Settings content</Tabs.Content>
</Tabs>

This pattern provides flexibility while maintaining a clean API. Users can customize structure without prop drilling.