Tabs

Account

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

Name

Installation

Usage

<Tabs>
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="password">Password</TabsTab>
  </TabsList>
  <TabsPanels>
    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
    <TabsPanel value="password">Change your password here.</TabsPanel>
  </TabsPanels>
</Tabs>

API Reference

Prop	Type	Default
`mode?`	`"auto-height" \| "layout"`	`"auto-height"`
`transition?`	`Transition`	`{ type: "spring", stiffness: 200, damping: 25 }`

TabsPanel

Animate UI API Reference - TabsPanel Primitive Base UI API Reference - Tabs.Panel

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.5, ease: "easeInOut" }`
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Base UI Tabs
Credit to shadcn/ui for style inspiration.

On this page