Tabs

v1.2.0

A tabbed interface for organizing content.

A thin underline highlights the active tab.

Overview content goes here.

Filled pill shape highlights the active tab.

Pill tab overview panel.

Compact segmented style for toolbar filtering.

Daily breakdown of events and tasks.

Minimal flat style for sidebar navigation.

Showing all items in the workspace.

Frosted glass style with backdrop blur.

Glass style overview content.

Add icons to tab labels for visual clarity.

Manage your account details, email, and security preferences.

Control the active tab from parent state.

Active project list with status indicators.

Active tab: “tab1”

Disable individual tabs to prevent selection.

General configuration options.

API Reference

All available props for this component.

Property	Type	Default	Description
variant	'line' \| 'pill' \| 'segmented' \| 'small' \| 'glass'	'line'	Controls the tab track and trigger visual style.
items	TabItem[]	required	Array of tab definitions with id, label, content, and optional disabled flag.
defaultActiveId	string	first item's id	Uncontrolled initial active tab ID on first render.
activeId	string	undefined	Controlled active tab ID for external state management.
onValueChange	(id: string) => void	undefined	Callback triggered when the active tab changes.
className	string	undefined	Additional CSS class names for the root wrapper.