Tabs

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

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

Odyssey UI API Reference - Tabs Primitive

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

TabsList

Odyssey UI API Reference - TabsList Primitive

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

TabsTrigger

Odyssey UI API Reference - TabsTrigger Primitive

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

TabsContents

Odyssey 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

Odyssey 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