Skip to main content

Tabs

Tablist with sliding indicator, optional icons, sizes, full-width layout, and arrow-key navigation.

Default (with disabled)

3 drafts waiting for review.

Uncontrolled

Summary stats and recent activity.

With icons

Draft entries with icons on each tab.

Icon-only tabs

Views, reads, and engagement.

Sizes

Small tab height.

Large tab height.

Full width

Compose tab stretches evenly across the row.

Animation variants

animationVariant — click an inactive tab trigger to compare press feedback. The sliding indicator is separate built-in motion.

Default
None
Ripple
Scale
Sink
Lift
Pulse
Glow

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
itemsOptionalTabItem[]id, label, content, disabled?, icon?, iconOnly?
sizeOptional"sm" | "md" | "lg"mdTab trigger height.
fullWidthOptionalbooleanEvenly stretch tabs across the list.
value / onChangeOptionalstring + callbackControlled active tab.
defaultTabOptionalstringInitial tab when uncontrolled.
headerTrailingOptionalReactNodeOptional controls rendered beside the tab list (outside the tab track).
panellessOptionalbooleanOmit tab panels — tab list only (segmented control).
animationVariantOptionalPressAnimationVariantdefaultPress animation — default, none, ripple, scale, sink, lift, pulse, or glow.