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

---

title: Tabs description: A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-animate-tabs" />

Installation

<ComponentInstallation name="primitives-animate-tabs" />

Usage

With Highlight

<Tabs>
  <TabsHighlight>
    <TabsList>
      <TabsHighlightItem value="account">
        <TabsTrigger value="account">Account</TabsTrigger>
      </TabsHighlightItem>
      <TabsHighlightItem value="password">
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsHighlightItem>
    </TabsList>
  </TabsHighlight>
  <TabContents>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </TabContents>
</Tabs>

Without Highlight

<Tabs>
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabContents>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">Change your password here.</TabsContent>
  </TabContents>
</Tabs>

API Reference

Tabs

<TypeTable type={{ defaultValue: { description: 'The default value of the Tabs component.', type: 'string', required: false, }, value: { description: 'The value of the Tabs component.', type: 'string', required: false, }, onValueChange: { description: 'The callback function that is called when the value changes.', type: '(value: string) => void', required: false, }, '...props': { description: 'The props of the Tabs component.', type: 'React.ComponentProps<"div">', required: false, }, }} />

TabsHighlight

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlight" text="Animate UI API Reference - Highlight" />

<TypeTable type={{ transition: { description: 'The transition of the TabsHighlight component.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 200, damping: 25 }', }, }} />

TabsHighlightItem

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem" text="Animate UI API Reference - HighlightItem" />

TabsList

<TypeTable type={{ '...props': { description: 'The props of the TabsList component.', type: 'React.ComponentProps<"div">', required: false, }, }} />

TabsTrigger

<TypeTable type={{ value: { description: 'The value of the TabsTrigger component.', type: 'string', required: true, }, asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the TabsTrigger component.', type: 'HTMLMotionProps<"button">', required: false, }, }} />

TabsContents

<TypeTable type={{ transition: { description: 'The transition of the TabsContents component.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 300, damping: 32, bounce: 0, restDelta: 0.01 }', }, '...props': { description: 'The props of the TabsContents component.', type: 'React.ComponentProps<"div">', required: false, }, }} />

TabsContent

<TypeTable type={{ value: { description: 'The value of the TabsContent component.', type: 'string', required: true, }, asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the TabsContent component.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

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