Tabs

A set of layered panels, one visible at a time, with an active-tab indicator that slides to match the current selection using a spring animation. Built on Base UI's tabs primitive, so focus management, keyboard navigation, and ARIA wiring come for free.

Last updated August 6, 2026

Overview

A quick summary of what changed, at a glance.

Variants

Pass variant to Tabs to switch the tab list's visual style.

Default

Rounded

Line

Ghost

Examples

With icons

Your feed, curated from the people you follow.

Disabled tab

Only visible to you until it's sent for review.

Controlled

Step 1 of 3 — tell us about the order.

Vertical

Name, language, and workspace preferences.

Scrollable

When the tab list overflows, edges fade to hint at more content and sharpen once you've scrolled all the way — direction aware, so it mirrors correctly in RTL.

Installation

$ npx shadcn@latest add @persianlabsui/tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
export function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Overview content</TabsContent>
      <TabsContent value="activity">Activity content</TabsContent>
    </Tabs>
  )
}

API Reference

Tabs

Prop	Type	Default	Description
value	Value	undefined	The value of the currently active tab. Use when controlled.
defaultValue	Value	0	The initial active tab value when uncontrolled.
onValueChange	(value, details) => void	—	Called when the active tab changes, whether by click, keyboard, or an automatic fallback.
orientation	"horizontal" \| "vertical"	"horizontal"	The layout flow direction of the tab list.
variant	TabsVariant	"default"	The visual style of the tab list and its sliding indicator.

TabsList

Prop	Type	Default	Description
activateOnFocus	boolean	false	Activate a tab as soon as it receives keyboard focus, instead of requiring Enter or Space.
loopFocus	boolean	true	Loop keyboard focus back to the first tab when the end of the list is reached.

TabsTrigger

Prop	Type	Default	Description
value	Value	required	The value associated with this tab.
disabled	boolean	false	Prevents interaction and excludes the tab from keyboard navigation.

TabsContent

Prop	Type	Default	Description
value	Value	required	Shown when the Tab with the matching value is active.
keepMounted	boolean	false	Keep the panel mounted in the DOM while hidden, instead of unmounting it.

Edit this page on GitHub

PreviousOverview NextCombobox