Tabs

Tabs

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

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

Name

Username

Installation

Usage

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

Props

Docs API Reference

Animate UI props

TabsList

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }`
`activeClassName?`	`string`	-

TabsContents

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

TabContent

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.5, ease: 'easeInOut' }`

Credits

We use Radix UI for the tabs component.
We take our inspiration from Shadcn UI for the tabs style.

Built by Skyleen. The source code is available on GitHub.

On this page