The compound components pattern lets several related [React](/courses/reactjs) components work together as one larger feature while giving consumers control over how those pieces are arranged. A good mental model is native [HTML](/courses/html): ```html ``` `select` and `option` are separate pieces, but they are designed to cooperate. ### React Example A reusable Tabs API could look like: ```jsx Profile Settings ``` The consumer controls the structure, while `Tabs` coordinates the behavior. ### Shared Internal State The parent can own state: ```jsx function Tabs({ children, defaultValue }) { const [value, setValue] = useState(defaultValue); return ( {children} ); } ``` Child components access that shared state: ```jsx function TabsTrigger({ value, children }) { const tabs = useContext(TabsContext); return ( ); } ``` A panel can use the same context: ```jsx function TabsPanel({ value, children }) { const tabs = useContext(TabsContext); if (tabs.value !== value) { return null; } return

{children}

; } ``` ### Why Is This Better Than a Large Props Object? Without composition, an API might become: ```jsx ``` As requirements grow, the prop API can become difficult to understand. Compound components let consumers compose the UI naturally: ```text Tabs ├── List │ ├── Trigger │ └── Trigger └── Panels ``` ### Good Uses of Compound Components This pattern works especially well for: ```text Tabs Accordions Menus Dropdowns Selects Dialogs Carousels Form field systems ``` ### Keep Coordination Internal Consumers should ideally not need to manually manage things such as: ```text Internal IDs Selection synchronization Keyboard relationships Shared context ARIA connections ``` The compound component system should coordinate those details. ### Interview-Ready Answer The compound components pattern creates a family of related components that cooperate through shared state, often using Context. It is useful for components such as Tabs, Accordions, and Menus because consumers can compose the UI structure naturally while the parent component keeps internal coordination logic hidden.