Tabs

A set of layered sections of content that can be switched between using tab controls.

Basic

Add a bottom border to Tabs.List so the active underline sits on a line, as in the product. Set defaultValue on Tabs.Root to pick the tab shown first, or pass value and onValueChange to control it.

4 of 5 checks passed. The claim about pricing needs a source.

With icons

Add flex items-center gap-2 to a trigger to put an icon before its label.

How often answer engines mention your brand.

With content

Tabs.Content accepts any layout, such as a grid of metric cards.

Visibility42.6%
Citations1,284

Disabled

A disabled trigger can't be selected and is skipped by arrow-key navigation.

Sentiment is available on the Growth plan.

Usage

Tabs.Root Properties

defaultValue
string

Value of the tab shown first when uncontrolled

value
string

Value of the active tab when controlled

onValueChange
(value: string) => void

Callback fired when the active tab changes

orientation
'horizontal''vertical'

Orientation of the tabs, used for arrow-key navigation

Default: horizontal

activationMode
'automatic''manual'

automatic activates a tab when it receives focus. manual waits for Enter, Space or a click.

Default: automatic

className
string

Additional CSS classes to apply to the root

Tabs.List Properties

loop
boolean

Whether arrow-key focus wraps from the last tab to the first

Default: true

className
string

Additional CSS classes to apply to the list

Tabs.Trigger Properties

valueRequired
string

Value that links the trigger to its content

disabled
boolean

Whether the tab trigger is disabled

Default: false

className
string

Additional CSS classes to apply to the trigger

Tabs.Content Properties

valueRequired
string

Value of the trigger this content belongs to

forceMount
true

Keeps the content mounted while its tab is inactive

className
string

Additional CSS classes to apply to the content