Tabs

Switch between views of the same object without leaving the page.

ComponentsRadix Tabs

Preview theme

Playground

Tabs switch between views of the same object. The pill variant suits compact toolbars; the line variant sits on top of a panel or record.

Preview

Overview

Summary, owner and next step for the project.

Props

Variant

Orientation

Activation

Icons

Count badges

Disabled tab

example.tsxtsx

1import { Activity, FileText, LayoutGrid, Settings } from "lucide-react"
2import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
3
4<Tabs defaultValue="overview">
5  <TabsList>
6    <TabsTrigger value="overview">
7      <LayoutGrid />
8      Overview
9    </TabsTrigger>
10    <TabsTrigger value="activity">
11      <Activity />
12      Activity
13      <span className="rounded-full bg-muted px-1.5 text-xs">12</span>
14    </TabsTrigger>
15    <TabsTrigger value="files">
16      <FileText />
17      Files
18      <span className="rounded-full bg-muted px-1.5 text-xs">3</span>
19    </TabsTrigger>
20    <TabsTrigger value="settings">
21      <Settings />
22      Settings
23    </TabsTrigger>
24  </TabsList>
25  <TabsContent value="overview">…</TabsContent>
26  <TabsContent value="activity">…</TabsContent>
27  <TabsContent value="files">…</TabsContent>
28  <TabsContent value="settings">…</TabsContent>
29</Tabs>

Automatic activation shows a panel as soon as its tab gets focus. Manual moves focus with the arrow keys and waits for Enter or Space, which is better when panels are slow to render.

States

States of a single TabsTrigger. Active is the raised pill in the playground; these are the inactive trigger's states.

States

Defaultrest
Hover:hover
Focus:focus-visible
Loadingaria-busy
Disableddisabled
Errorerrors in panel
Successstep complete

Patterns

Line tabs over a record with counts in the triggers, and the shared ViewSwitcher, a segmented control whose pill slides between views.

Tabs over a record

Demo data

Globex enterprise rollout

Updated Sep 28

Owner

LP Leo Park

Stage

Proposal

Close date

Nov 14, 2026

Segmented view switcher

Projects

Customer portalBuilding
Billing migrationReview
Onboarding emailsDone

API

Built on Radix Tabs.

Prop	Type	Default	Description
`value / onValueChange`	`string / (value: string) => void`	—	Controlled active tab. Use defaultValue for uncontrolled.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Also switches arrow keys: left and right, or up and down.
`activationMode`	`"automatic" \| "manual"`	`"automatic"`	Manual waits for Enter or Space before switching panels.
`TabsList variant`	`"default" \| "line"`	`"default"`	Pill on a muted track, or an underline for panel headers.
`TabsTrigger disabled`	`boolean`	`false`	Skipped by arrow keys. Say why nearby if it is not obvious.
`TabsContent forceMount`	`boolean`	—	Keep an inactive panel mounted, e.g. to preserve form state.
`ViewSwitcher options`	`{ value, label, icon? }[]`	—	Shared segmented control for switching views of one dataset.

Accessibility

Keyboard

Into the tab list, then into the panel: Tab
Previous or next tab (horizontal): ←or→
Previous or next tab (vertical): ↑or↓
First or last tab: HomeorEnd
Activate the focused tab (manual): EnterorSpace

Semantics and ARIA

Renders tablist, tab and tabpanel. Each tab has aria-selected and aria-controls; each panel is labelled by its tab.
Only the active tab is in the tab order (roving tabindex), so Tab jumps straight from the list into the panel.
Count badges are part of the tab name (“Activity 12”). Keep them short numbers; don’t put buttons inside a tab.
ViewSwitcher uses tablist and tab semantics with click and Tab navigation. It switches the view of the same content, so it has no separate panels.
Tabs are not navigation. If each option is its own page with a URL, use links in a nav instead.