Roll-your-own tab components forget keyboard nav, ARIA roles, and the controlled / uncontrolled split — so every app re-invents focus-trap and re-debugs the same screen-reader bug. The other libraries that ship tabs lock you into render-prop APIs that look weird next to the rest of your codebase.

Tabs is a controlled compound component with Tabs.List, Tabs.Tab, Tabs.Panels, and Tabs.Panel children. Supports defaultTab (uncontrolled) and activeTab + onTabChange (controlled). Stable value props on each tab make it agent-bridgeable.

Wrap your tabs in <Tabs defaultTab="overview">, declare <Tabs.Tab value="overview"> entries inside Tabs.List, and matching <Tabs.Panel value="overview"> entries inside Tabs.Panels. To let an MCP agent switch tabs, hoist state and pass activeTab + onTabChange.