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

Account

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

Name

Password

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

Current password

New password

Installation

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

Animate UI API Reference - Tabs Primitive

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

TabsList

Animate UI API Reference - TabsList Primitive

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

TabsTrigger

Animate UI API Reference - TabsTrigger Primitive

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

TabsContents

Animate UI API Reference - TabsContents Primitive

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

TabsContent

Animate UI API Reference - TabsContent Primitive

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

Credits

Credit to shadcn/ui for style inspiration.

Tabs

On this page