Compound Components
A set of components, like Tabs.Root and Tabs.Trigger, that share state behind the scenes while you control how their parts are arranged.
See it
What it is
Compound components are a family of parts used together, such as Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. The root owns shared state and exposes it through context, so callers arrange the parts in JSX without threading selectedValue and onSelect through every layer. HTML has shipped a compound component since the beginning: select and option are useless apart and coordinated together. Radix UI is the clearest modern example of the pattern in React.
Reach for it when a widget has recognizable regions but callers need control over their order, markup, or styling. Tabs, menus, accordions, and disclosure groups fit well because the public API reads like the widget while keyboard and ARIA behavior stay centralized.
Gotcha: the convenient wiring is implicit. A Trigger rendered outside its Root has no shared state, and nested roots can make the wrong context hard to spot. Put context access behind a hook that throws a clear error when the provider is missing, and keep the number of required parts small.
Ask AI for it
Build an accessible Tabs API as compound components named Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. Store the active tab in Tabs.Root, share it with React createContext and useContext, and hide all internal state wiring from callers. Implement the WAI-ARIA tabs pattern with role='tablist', role='tab', role='tabpanel', aria-selected, aria-controls, and ArrowLeft and ArrowRight keyboard navigation. Make the context hook throw a clear Error when a part is used outside Tabs.Root, then show a usage where the caller freely arranges the parts.