Tabs

An animated tab switcher with two visual variants. Both share the same controlled / uncontrolled API — only the appearance changes. Content rendering is left to the caller.

Underline (default)

The default underline variant: a sliding bottom indicator under the active tab.

Overview

Logs

Parameters

Controlled

Overview

Activity

Settings

Active: activity

Count badges

Add count to any tab to show a pill badge. Badge opacity and background respond to active and hover state.

Runs24

Artifacts7

Notes

Small size

Use size="sm" for a compact 12px tab bar.

List

Grid

Tree

Segment variant

A classic segmented control: tinted container background, active tab gets a raised pill matching the page background. label accepts any ReactNode — pass icons or text.

Props

Prop	Type	Default	Description
`tabs`	`Tab[]`	—	Array of tab descriptors.
`variant`	`'underline' \| 'segment'`	`'underline'`	Visual style.
`value`	`string`	—	Controlled active tab value.
`defaultValue`	`string`	`tabs[0]`	Initial tab in uncontrolled mode.
`onChange`	`(value: string) => void`	—	Called when the user clicks a tab.
`onValueChange`	`(value: string) => void`	—	Alias for `onChange`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Controls text size and button dimensions across all variants.
`indicatorHeight`	`number`	`4`	Indicator thickness in px. `underline` variant only.
`className`	`string`	—	Extra classes on the container.

Tab

Field	Type	Description
`value`	`string`	Unique identifier for the tab.
`label`	`ReactNode`	Content rendered inside the tab — string, icon, or any element.
`count`	`number`	Count badge shown next to the label. `underline` variant only.
`title`	`string`	Tooltip text. Useful for icon-only segment tabs.

Compound API

Instead of the data-driven tabs prop, you can compose the tab bar and its panels from sub-components. Pass value / defaultValue and onValueChange (or onChange) to Tabs, then place TabsList / TabsTrigger / TabsContent as children. Each TabsContent renders only when its value matches the active tab.

tsx

<Tabs defaultValue="overview" onValueChange={setTab}>
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="activity">…</TabsContent>
</Tabs>

`TabsList`

Row container for the triggers. Accepts any <div> props plus className.

`TabsTrigger`

Prop	Type	Default	Description
`value`	`string`	—	Identifier this trigger activates. Required.
`className`	`string`	—	Extra classes on the button.

Also forwards native <button> attributes (onClick, disabled, …).

`TabsContent`

Prop	Type	Default	Description
`value`	`string`	—	Panel is shown only when this matches the active tab. Required.
`className`	`string`	—	Extra classes on the panel.