Function Tabs

Tabbed interface root. Compose with <TabList>, <Tab>, and <TabPanel>. The role-based markup, aria-selected, hidden, and roving tabindex are all rendered from the value, so server output is correct before the enhancer adds keyboard navigation. Tab values come from each <Tab value>, defaulting to the index; panels match tabs by position. Selection works uncontrolled (defaultValue) or controlled (value + onValueChange).

<Tabs value={tab} onValueChange={setTab}>
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="install">Install</Tab>
  </TabList>
  <TabPanel>Zero runtime by default.</TabPanel>
  <TabPanel>npm install hydrateless</TabPanel>
</Tabs>
Copy