Tabs

Powered by

Radix UIShadcn UIAnimate UIMotion

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.

Combined with Toggle Group

This example demonstrates the proper relationship between tabs and toggle groups. Use tabs to navigate between distinct content areas, and toggle groups within each tab to filter or adjust that specific view's content.

When to use

Tabs function as a navigation bar positioned atop content, allowing users to switch between distinct content views. Each tab displays unique content specific to that tab, without duplication across tabs. When a user interacts with a tab, it triggers the display of new content in a fresh view.

Use tabs when:

• Navigating between different, self-contained content areas
• Each section has unique content specific to that context
• Content changes completely when switching tabs
• Users need to switch between parallel information hierarchies

Don't use tabs when:

• Filtering or adjusting a single content view (use Toggle Group/Segmented Control instead)
• Content is shared or filtered across different states
• You need to show/hide portions of the same dataset

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

TabsList

TabsTrigger

TabsContent

TabsContents

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.