║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Tabs description: A component for toggling between related panels on the same page. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-09

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

Installation

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

Usage

<Tabs>
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="password">Password</TabsTab>
  </TabsList>
  <TabsPanels>
    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
    <TabsPanel value="password">Change your password here.</TabsPanel>
  </TabsPanels>
</Tabs>

API Reference

Tabs

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

<ExternalLink href="https://base-ui.com/react/components/tabs#root" text="Base UI API Reference - Tabs.Root" />

</div>

TabsList

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

<ExternalLink href="https://base-ui.com/react/components/tabs#list" text="Base UI API Reference - Tabs.List" />

</div>

TabsTab

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

<ExternalLink href="https://base-ui.com/react/components/tabs#tab" text="Base UI API Reference - Tabs.Tab" />

</div>

TabsPanels

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

<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 TabsPanels 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 TabsPanels component.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 200, damping: 25 }', }, }} />

TabsPanel

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

<ExternalLink href="https://base-ui.com/react/components/tabs#panel" text="Base UI API Reference - Tabs.Panel" />

</div>

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

Credits

• Base UI Tabs
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║