Tabs

Organizes content into tabbed sections. Supports underline and pill variants with keyboard navigation.

Underline Variant

Account settings content

Pill Variant

Overview content

Segmented Variant

segmented is a tighter, container-bound variant of pill — useful as a control-bar replacement (think iOS segmented control) for switching between 2-4 related views.

Day view

For a standalone segmented control without Tabs.Content panels, use the dedicated <SegmentedControl> primitive instead (component reference coming in Phase 7-c).

Mobile considerations

• Tab triggers meet the 44px tap target on mobile (vertical padding scales automatically on coarse pointer).
• For long tab lists (5+ items), the list scrolls horizontally with -webkit-overflow-scrolling: touch momentum and snap.
• Active-tab indicator uses var(--tui-duration-base) + var(--tui-ease-in-out) for symmetric slide animation (Pattern D — layout shift).

With Disabled Tab

Active tab content

Tabs Props

Prop	Type	Default	Description
defaultValue	string	-	Initial active tab (uncontrolled mode)
value	string	-	Active tab value (controlled mode)
onChange	(value: string) => void	-	Callback when active tab changes
variant	'underline' | 'pill' | 'segmented'	'underline'	Visual variant
children	ReactNode	-	Children
className	string	-	Additional CSS class name
style	CSSProperties	-	Additional inline styles

Tabs.Trigger Props

Prop	Type	Default	Description
value	string	-	Value that identifies this tab
disabled	boolean	false	Disable the trigger
children	ReactNode	-	Trigger label
className	string	-	Additional CSS class name

Tabs.Content Props

Prop	Type	Default	Description
value	string	-	Value that identifies which tab this content belongs to
children	ReactNode	-	Panel content
className	string	-	Additional CSS class name