Tabs

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

Open in

Account

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

Name

Installation

Usage

<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

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

TabPanels

Animate UI API Reference - TabPanels Primitive Headless UI API Reference - TabPanels

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

Credits

Headless Tabs
Credit to shadcn/ui for style inspiration.

On this page