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

---

title: Tabs description: A set of layered sections of content—known as tab panels—that are displayed one at a time. author: name: imskyleen url: https://github.com/imskyleen

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

Installation

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

Usage

<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

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tabs#tabs" text="Animate UI API Reference - Tabs Primitive" />

<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, }, }} />

TabsList

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tabs#tabslist" text="Animate UI API Reference - TabsList Primitive" />

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

TabsTrigger

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tabs#tabstrigger" text="Animate UI API Reference - TabsTrigger Primitive" />

<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

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tabs#tabscontents" text="Animate UI API Reference - TabsContents Primitive" />

<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

<ExternalLink href="https://animate-ui.com/docs/primitives/animate/tabs#tabscontent" text="Animate UI API Reference - TabsContent Primitive" />

<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, }, }} />

Credits

• Credit to shadcn/ui for style inspiration.

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