Tabs

A high-quality, styled React tabs component built with @base-ui/react for switching views.

The Tabs component manages views organized into tabbed panels with smooth indicator animations and variant styling.

Usage

import { Tabs } from "@/components/ui/tabs";

export function ExampleTabs() {
  return (
    <Tabs defaultValue="overview" variant="pills">
      <Tabs.List>
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="settings">Settings</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Overview content goes here.</Tabs.Panel>
      <Tabs.Panel value="settings">Settings content goes here.</Tabs.Panel>
    </Tabs>
  );
}

Preview

Manage your profile information and account preferences here.

Variants

Visual Variants

The variant prop controls the visual appearance of the tab list, tab triggers, and active indicators.

Default

Manage your account details.

<Tabs defaultValue="account" variant="default">
  <Tabs.List>
    <Tabs.Tab value="account">Account</Tabs.Tab>
    <Tabs.Tab value="password">Password</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value="account">Account Content</Tabs.Panel>
</Tabs>

Pills

System performance overview.

<Tabs defaultValue="overview" variant="pills">
  <Tabs.List>
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="analytics">Analytics</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
</Tabs>

Underline

Active organization projects.

<Tabs defaultValue="projects" variant="underline">
  <Tabs.List>
    <Tabs.Tab value="projects">Projects</Tabs.Tab>
    <Tabs.Tab value="tasks">Tasks</Tabs.Tab>
  </Tabs.List>
</Tabs>

Segmented

Daily metrics snapshot.

<Tabs defaultValue="daily" variant="segmented">
  <Tabs.List>
    <Tabs.Tab value="daily">Daily</Tabs.Tab>
    <Tabs.Tab value="weekly">Weekly</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
</Tabs>

Outline

General application options.

<Tabs defaultValue="general" variant="outline">
  <Tabs.List>
    <Tabs.Tab value="general">General</Tabs.Tab>
    <Tabs.Tab value="security">Security</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
</Tabs>

Line

Main activity feed.

<Tabs defaultValue="feed" variant="line">
  <Tabs.List>
    <Tabs.Tab value="feed">Feed</Tabs.Tab>
    <Tabs.Tab value="activity">Activity</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
</Tabs>

Sizes

The size prop adjusts padding and font size (sm, md, lg).

<Tabs size="sm" variant="pills">...</Tabs>
<Tabs size="md" variant="pills">...</Tabs>
<Tabs size="lg" variant="pills">...</Tabs>

Fitted Tabs

Set isFitted to true to expand tab triggers equally across full width.

<Tabs isFitted variant="segmented" defaultValue="1">
  <Tabs.List>
    <Tabs.Tab value="1">First</Tabs.Tab>
    <Tabs.Tab value="2">Second</Tabs.Tab>
    <Tabs.Tab value="3">Third</Tabs.Tab>
  </Tabs.List>
</Tabs>

Styling & Class Names

Target internal tabs CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.tabs`	Root container	Tabs root wrapper container.
`.tabs__list`	Tab list row	Horizontal or vertical tab list row.
`.tabs__tab`	Tab button	Individual tab trigger element.
`.tabs__indicator`	Sliding indicator	Animated active tab indicator bar or pill background.
`.tabs__panel`	Content panel	Content panel container corresponding to active tab.

Anatomy

import { Tabs } from "@base-ui/react/tabs";

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel />
</Tabs.Root>;

API Reference

Tabs.Root Props

Prop	Type	Default	Description
`value`	`string`	`undefined`	Controlled value of the active tab.
`defaultValue`	`string`	`undefined`	Initial uncontrolled active tab.
`variant`	`'default' \| 'pills' \| 'underline' \| 'segmented' \| 'outline' \| 'line'`	`'default'`	Visual style of the tab list and active indicators.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size scale for tabs and padding.
`isFitted`	`boolean`	`false`	Expand tabs equally to fill the extended container area.

Tabs

On this page