Compound Component Pattern

Overview

The Compound Component pattern is used to create components that work together to form a cohesive UI element. This pattern allows for more flexible component composition while keeping related state and logic encapsulated. Each component in the group shares an implicit state and can communicate with one another.

Examples

Accordion
Card
Dropdown
Menu
Select
Tabs

Key Benefits

  • Flexible component composition with a clear parent-child relationship
  • Shared implicit state between components without prop drilling
  • Better encapsulation of related logic and state
  • Improved readability with a more declarative API
  • Components that work together cohesively but can be customized individually