📝 Sign Up | 🔐 Log In

← Root | ↑ Up

┌───────────────────────────────────────────────────────────────────┐ │ 📄 shadcn/directory/imskyleen/animate-ui/components/headless/tabs │ └───────────────────────────────────────────────────────────────────┘

File: tabs.md

Updated: 11/7/2025

╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

title: Tabs description: Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-headless-tabs" />

Installation

<ComponentInstallation name="components-headless-tabs" />

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

TabGroup

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/tabs#tabgroup" text="Animate UI API Reference - TabGroup Primitive" />

<ExternalLink href="https://headlessui.com/react/tabs#tab-group" text="Headless UI API Reference - TabGroup" />

</div>

TabList

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/tabs#tablist" text="Animate UI API Reference - TabList Primitive" />

<ExternalLink href="https://headlessui.com/react/tabs#tab-list" text="Headless UI API Reference - TabList" />

</div>

Tab

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/tabs#tab" text="Animate UI API Reference - Tab Primitive" />

<ExternalLink href="https://headlessui.com/react/tabs#tab" text="Headless UI API Reference - Tab" />

</div>

TabPanel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/tabs#tabpanel" text="Animate UI API Reference - TabPanel Primitive" />

<ExternalLink href="https://headlessui.com/react/tabs#tab-panel" text="Headless UI API Reference - TabPanel" />

</div>

<TypeTable type={{ transition: { description: 'The transition of the TabPanel component.', type: 'Transition', required: false, default: '{ duration: 0.5, ease: "easeInOut" }', }, }} />

TabPanels

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/headless/tabs#tabpanels" text="Animate UI API Reference - TabPanels Primitive" />

<ExternalLink href="https://headlessui.com/react/tabs#tab-panels" text="Headless UI API Reference - TabPanels" />

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight" text="Animate UI API Reference - AutoHeight" />

</div>

<TypeTable type={{ mode: { description: 'The mode of the TabPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.', type: '"auto-height" | "layout"', required: false, default: '"auto-height"', }, transition: { description: 'The transition of the TabPanels component.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 200, damping: 25 }', }, }} />

Credits

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝

← Root | ↑ Up