Design System Glossary

Compound components

Compound components split a complex component into composable parts that share state implicitly: <Tabs.Root>, <Tabs.List>, <Tabs.Trigger>, <Tabs.Content>. The consumer arranges the parts in markup; the parent component coordinates the behaviour. Slot-based components are the same idea expressed through named slots rather than nested children.

The pattern wins where rigid props would lose: a single <Tabs items={...} /> is fine until someone needs to add a tooltip to a trigger or wrap content in a layout. Compound components let consumers compose freely without forcing the system to anticipate every shape. Radix UI, Reach UI and Ariakit all popularised this style, and it's now standard in headless component libraries.