Example 3 · 30–35 min
Compound Tabs
Context · No Prop Drilling · Accessibility
The Question
"Build a reusable Tabs component using the compound component pattern. Sub-components — Tabs.List, Tabs.Tab, Tabs.Panel — must share state through Context, not props. Include keyboard navigation and correct ARIA attributes."
createContextuseContextcompound patternno prop drillingroving tabindexARIA roleskeyboard nav
Demo — Settings Panel
Profile Settings
Two independent instances (each owns its own state)
Panel A content
Panel X content