Tabs

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

The registry ships two visual styles for TabsList and TabsTrigger: the default segmented pill and the underline bar. Most previews on this page show both inline so you can compare them at a glance.

Default

Underline

Variants

Card

Use the card variant for tabs with a bordered card container.

Default

Underline

Contained

Use the contained variant for tabs with a muted background container.

Sizes

Small

Use size="sm" for compact tabs.

Default

Underline

Large

Use size="lg" for larger tabs.

Default

Underline

Layout

Equal Layout

Use layout="equal" with columns to create equal-width tabs.

Default

Underline

Full Layout

Use layout="full" to make tabs span the full width.

Default

Underline

Gap

Use the gap prop to control spacing between tabs.

Default

Underline

Combinations

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

Default

Underline

Count badges

Default

Underline

Icon-only triggers

Default

Underline

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.

Default

Underline

<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.