Tabs

Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.

Open in

Make changes to your account here. Click save when you're done.

Name

Username

mode

Installation

Usage

With Highlight

<TabGroup>
  <TabHighlight>
    <TabList>
      <TabHighlightItem index={0}>
        <Tab index={0}>Account</Tab>
      </TabHighlightItem>
      <TabHighlightItem index={1}>
        <Tab index={1}>Password</Tab>
      </TabHighlightItem>
    </TabList>
  </TabHighlight>
  <TabPanels>
    <TabPanel>Make changes to your account here.</TabPanel>
    <TabPanel>Change your password here.</TabPanel>
  </TabPanels>
</TabGroup>

Without Highlight

<TabGroup>
  <TabList>
    <Tab index={0}>Account</Tab>
    <Tab index={1}>Password</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Make changes to your account here.</TabPanel>
    <TabPanel>Change your password here.</TabPanel>
  </TabPanels>
</TabGroup>

API Reference

TabGroup

Headless UI API Reference - TabGroup

TabHighlight

Animate UI API Reference - Highlight

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

TabHighlightItem

Animate UI API Reference - HighlightItem

Prop	Type	Default
`index?`	`number`	-

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.5, ease: "easeInOut" }`

TabPanels

Headless UI API Reference - TabPanels Animate UI API Reference - AutoHeight

Prop	Type	Default
`mode?`	`"auto-height" \| "layout"`	`"auto-height"`
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

Credits

Headless Tabs

On this page