Tabs

A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.

Open in

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

Name

Username

Change your password here. After saving, you'll be logged out.

Current password

New password

Confirm password

Installation

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

Prop	Type	Default
`defaultValue?`	`string`	-
`value?`	`string`	-
`onValueChange?`	`(value: string) => void`	-
`...props?`	`React.ComponentProps<"div">`	-

TabsHighlight

Animate UI API Reference - Highlight

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

TabsHighlightItem

Animate UI API Reference - HighlightItem

TabsList

Prop	Type	Default
`...props?`	`React.ComponentProps<"div">`	-

TabsTrigger

Prop	Type	Default
`value`	`string`	-
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"button">`	-

TabsContents

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 300, damping: 32, bounce: 0, restDelta: 0.01 }`
`...props?`	`React.ComponentProps<"div">`	-

TabsContent

Prop	Type	Default
`value`	`string`	-
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

Tabs

On this page