Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Made by imskyleenPowered by
Variants
Card
Use the card variant for tabs with a bordered card container.
Contained
Use the contained variant for tabs with a muted background container.
Underline
Use the underline variant for tabs with a bottom border indicator.
Sizes
Small
Use size="sm" for compact tabs.
Large
Use size="lg" for larger tabs.
Layout
Equal Layout
Use layout="equal" with columns to create equal-width tabs.
Full Layout
Use layout="full" to make tabs span the full width.
Gap
Use the gap prop to control spacing between tabs.
Combinations
Card with Underline
Combine card variant with underline TabsList.
Contained with Equal Layout
Combine contained variant with equal layout.
When to use
Tabs organize content into separate panels. Use this decision tree:
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>Underline Variant
<Tabs>
<TabsList variant="underline">
<TabsTrigger variant="underline" value="tab1">Tab 1</TabsTrigger>
<TabsTrigger variant="underline" value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContents>
<TabsContent value="tab1">Tab 1 Content</TabsContent>
<TabsContent value="tab2">Tab 2 Content</TabsContent>
</TabsContents>
</Tabs>Props
Animate UI Props
Tabs
Prop
Type
TabsList
Prop
Type
TabsTrigger
Prop
Type
TabsContent
Prop
Type
TabsContents
Prop
Type
Credits
- We use Radix UI for the tabs component.
- We take our inspiration from Shadcn UI for the tabs style.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.