Beta
Animate UI

Tabs

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

Made by imskyleen

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

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

DocsAPI Reference

Animate UI props

TabsList

PropTypeDefault
transition?
Transition
{ type: 'spring', bounce: 0, stiffness: 200, damping: 25 }
activeClassName?
string
-

TabsContents

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

TabContent

PropTypeDefault
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