Compound Components in React
From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026
Compound Components
Build flexible APIs with related components that share state
jsx
function Tabs({ children, defaultTab }) {
const [active, setActive] = useState(defaultTab);
return (
<TabsContext.Provider value={{ active, setActive }}>
{children}
</TabsContext.Provider>
);
}
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;💡 Compound components give consumers full control over markup while sharing state
⚡ Used by libraries like Radix UI, shadcn/ui, and React Aria for flexible primitives
📌 Attach children as static properties (Tabs.Tab) for a clean discoverable API
🟢 Internal Context shares state without exposing it as props on every child
compoundpatterncontext