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

<Tabs>
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContents>
    <TabsContent value="tab1">Content 1</TabsContent>
    <TabsContent value="tab2">Content 2</TabsContent>
  </TabsContents>
</Tabs>

Props

Prop	Type	Default
`value?`	`string`	-
`onValueChange?`	`(value: string) => void`	-
`defaultValue?`	`string`	-
`className?`	`string`	-
`children`	`React.ReactNode`	-

TabsList

Prop	Type	Default
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`
`className?`	`string`	-
`children`	`React.ReactNode`	-
`activeClassName?`	`string`	-

TabsTrigger

Prop	Type	Default
`value`	`string`	-
`className?`	`string`	-
`children`	`React.ReactNode`	-

TabsContents

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.4, ease: "easeInOut" }`
`className?`	`string`	-
`children`	`React.ReactNode`	-

TabsContent

Prop	Type	Default
`value`	`string`	-
`className?`	`string`	-
`children`	`React.ReactNode`	-

Tabs

On this page