Tabs

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

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.

Patterns

Vertical orientation

Disabled trigger with tooltip

Count badges

Icon-only triggers

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

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

Keyboard interactions

As Links

Pass a JSX element (or render function) to TabsTrigger's render prop to swap the rendered element while keeping keyboard, data-state, and active-highlight behavior intact.

<TabsList>
  <TabsTrigger render={<Link to="/overview" />} value="overview">
    Overview
  </TabsTrigger>
  <TabsTrigger render={<Link to="/billing" />} value="billing">
    Billing
  </TabsTrigger>
</TabsList>

Accessibility

• TabsList carries role="tablist", each TabsTrigger is role="tab" with aria-selected, and each TabsPanel is role="tabpanel" wired via aria-controls / aria-labelledby.
• Focus is roving inside TabsList — only the active tab is in the tab order; the others are reachable via arrow keys.
• Base UI activates tabs on focus by default; pass activateOnFocus={false} on Tabs if a tab triggers expensive work and should only activate on explicit Enter / Space.
• Use the underline variant sparingly when tabs live next to inline links — the underline can be mistaken for a link.

Credits

• We use Base 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.