Animate UI

Tabs

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

Made by imskyleen
Edit on GitHub

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

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
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 200, damping: 25 }

TabHighlightItem

Animate UI API Reference - HighlightItem
PropTypeDefault
index?
number
-

TabList

Headless UI API Reference - TabList

Tab

Headless UI API Reference - Tab

TabPanel

Headless UI API Reference - TabPanel
PropTypeDefault
transition?
Transition
{ duration: 0.5, ease: "easeInOut" }

TabPanels

Headless UI API Reference - TabPanels
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 200, damping: 25 }

Credits

Built by Skyleen. The source code is available on GitHub.