Compound Component Pattern

Why Compound Components?

The compound component pattern solves a common problem: components that grow too many props. Instead of passing numerous configuration options to a single component, you split functionality into smaller subcomponents that work together and share state implicitly.

When to use it:

Components with multiple related parts (tabs, accordions, dropdowns, modals)
When you need flexible composition — users can rearrange, omit, or extend subcomponents
When a single component would require many props to configure all its parts

Benefits:

Reduced prop drilling — state is shared implicitly via context
Flexible API — consumers compose the UI declaratively by nesting children
Separation of concerns — each subcomponent handles its own rendering logic

For a deeper dive, see the excellent Compound Pattern article on patterns.dev.

Example

// Usage
export const PopoverDemo = () => (
  <Popover>
    <Popover.Trigger asChild>
      <Button variant="outline">Open popover</Button>
    </Popover.Trigger>
    <Popover.Content className="w-80">
      <p>Content goes here</p>
    </Popover.Content>
  </Popover>
);