Smooth tabs
Tabs whose active pill slides between labels while panels crossfade with a directional blur.
API reference
Components
<SmoothTabs />
Tabs root with a sliding indicator and directional panel crossfade.
defaultValue?
The uncontrolled initial selected tab value.
value?
The selected tab value (controlled).
onValueChange?
Called when the selection changes.
contentOffsetX?
Horizontal distance (px) the panel slides during the crossfade. Default 50.
className?
Merged onto the root wrapper.
children?
SmoothTabsList and SmoothTabsPanels.
<SmoothTabsList />
The tablist rail with roving-tabindex keyboard navigation.
ariaLabel?
Accessible name for the role="tablist".
className?
Merged onto the tablist shell.
children?
The SmoothTabsTab children.
<SmoothTabsTab />
One tab with a shared sliding pill when selected.
value
This tab's value. Must match a SmoothTabsPanel.
children?
The tab's label.
className?
Merged onto the tab <button>.
<SmoothTabsPanels />
Crossfade viewport for the active panel.
children?
The SmoothTabsPanel children.
className?
Merged onto the crossfade viewport.
<SmoothTabsPanel />
Declarative panel config read by SmoothTabsPanels. Renders nothing itself.
value
This panel's value. Must match a SmoothTabsTab.
children?
The panel's content.
className?
Merged onto the animated role="tabpanel" wrapper.
Hooks
useSmoothTabsContext
Read the active tab value and a selector from outside the parts.
useSmoothTabsContext(): {
/** The currently selected tab's value. */
value: string
/** Select a tab by value. */
select: (value: string) => void
}Featured in
See the smooth tabs composed into full sections.
