Tabs

A borderless selected-navigation control for switching between related panels in one view.

Use Tabs when a small set of peer sections shares the same context and switching should not navigate to a new page. Use links when each destination needs its own URL.

Project summary and members.

Basic tabs

Installation

$npx shadcn@latest add @patchui/tabs

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/tabs.tsx.

Usage

<Tabs defaultValue="overview">
  <TabsList aria-label="Project sections">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsPanel value="overview">Project summary</TabsPanel>
  <TabsPanel value="activity">Recent changes</TabsPanel>
</Tabs>

Each TabsTrigger and its TabsPanel share a unique value. Give TabsList an accessible name that describes the section set.

Composition

Tabs
├── TabsList
│   └── TabsTrigger
└── TabsPanel

Examples

Icons and badge

Use an icon to reinforce a short label and a badge for compact, useful metadata. Keep both supplemental to the text label.

Four members have workspace access.

Tabs with icons and a badge

Vertical tabs

Vertical orientation places the list beside a flexible panel while preserving the same selection and focus treatment.

Name and contact details.

Vertical tabs

API reference

Prop	Type	Default	Description
value / onValueChange	string / (value: string) => void	-	Controls the active tab.
defaultValue	string	-	Sets the initial uncontrolled tab.
orientation	"horizontal" \| "vertical"	"horizontal"	Places the list above or beside its panels.
TabsList.activateOnFocus	boolean	false	Activates tabs immediately as arrow-key focus moves.
TabsTrigger.icon / badge	ReactNode / ReactNode \| number	-	Adds leading context and trailing metadata; a numeric zero badge is hidden.
TabsTrigger.tooltip	ReactNode	-	Explains why a disabled tab is unavailable.
TabsPanel.keepMounted	boolean	false	Keeps inactive panel content mounted while hidden.

Keyboard behavior

Tab enters the active tab and then continues into the active panel.
Left and Right move focus in horizontal lists. Up and Down move focus in vertical lists.
Home and End move to the first or last enabled tab.
By default, Enter or Space activates the focused tab. Set activateOnFocus when arrow navigation should also activate immediately.
Disabled tabs are skipped during keyboard navigation.

Accessibility

Put the accessible name on TabsList with aria-label or aria-labelledby.
Keep labels concise and ensure each panel remains understandable when reached from its tab.
Use keepMounted only when preserving panel state or expensive content is important; hidden panels must not remain interactable.