Compound component pattern for a flexible Tabs UI

Scenario

Context A design system requires a Tabs component that is flexible enough for teams to customize the tab list and panel layout independently. The Problem The current Tabs component accepts all configuration as a single complex props object, making it rigid and hard to extend with custom tab header styles. Constraints Implement the compound component pattern with Tabs, Tabs.List, Tabs.Tab, and Tabs.Panel sub-components. Share active tab state through context internally. Expose no required configuration props beyond children. Expected Deliverable A React Tabs implementation using the compound component pattern with implicit state sharing via context, providing a flexible and composable API.

Targeted skills