Tabs

Line

default

blue

emerald

Solid

default

blue

emerald

Tabs

Accessible tabbed navigation built on Radix UI Tabs. Supports line and solid variants with icon support, disabled states, and keyboard navigation.

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

<Tabs defaultValue="overview">
  <TabsList variant="line">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview content</TabsContent>
  <TabsContent value="settings">Settings content</TabsContent>
</Tabs>

Tabs props

Prop	Type	Default	Description
defaultValue	string	—	The value of the tab that should be active by default.
value	string	—	Controlled active tab value.
onValueChange	(value: string) => void	—	Callback fired when the active tab changes.
className	string	—	Additional CSS classes for the root element.

TabsList props

Prop	Type	Default	Description
variant	"line" \| "solid"	"line"	Visual style. "line" shows an underline indicator; "solid" shows a pill with background.
color	"default" \| "blue" \| "red" \| "green" \| "orange" \| "purple" \| "indigo" \| "pink" \| "yellow" \| "emerald"	"default"	Color of the active tab indicator. Affects the underline (line) or background (solid) of the selected trigger.
className	string	—	Additional CSS classes.

TabsTrigger props

Prop	Type	Default	Description
value*	string	—	The value that identifies this tab.
disabled	boolean	false	Disables interaction with the trigger.
className	string	—	Additional CSS classes.

TabsContent props

Prop	Type	Default	Description
value*	string	—	Must match the corresponding TabsTrigger value.
className	string	—	Additional CSS classes.