Beta
Animate UI

Tabs

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

Made by imskyleen

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

Installation

Usage

<TabGroup>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
    <Tab index={2}>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Tab 1 Content</TabPanel>
    <TabPanel>Tab 2 Content</TabPanel>
    <TabPanel>Tab 3 Content</TabPanel>
  </TabPanels>
</TabGroup>

Props

Animate UI props

Credits

  • We use Headless UI for the tabs component.
  • We take our inspiration from Shadcn UI for the tabs style.

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

On this page