Fluid Tabs Component

A Base UI tab selector where one active surface travels between tabs, giving selection a clear sense of spatial continuity.

Features

Capsule and restrained underline variants.
Controlled and uncontrolled state with Base UI keyboard semantics.
Interruptible pointer motion with instant keyboard and reduced-motion updates.
Horizontal overflow handling that keeps the active tab visible.
Semantic --fluid-tabs-* tokens for consumer theme customization.

Playground

Try the capsule and underline treatments, switch the active tab, and compare the motion behavior.

Controls

Active tab

Variant

Size

Installation

npx shadcn@latest add @sona-ui/fluid-tabs

Usage


const tabs = [
  { value: "overview", title: "Overview" },
  { value: "activity", title: "Activity" },
  { value: "settings", title: "Settings" },
];
 
export default function FluidTabsDemo() {
  return <FluidTabs tabs={tabs} />;
}

Props

Property	Type	Default	Description
`tabs`	`FluidTabItem[]`	`required`	Tabs displayed in the horizontal tab list.
`value`	`string`	`—`	Controlled active tab value.
`defaultValue`	`string`	`—`	Initially active tab for uncontrolled usage.
`onValueChange`	`(value: string) => void`	`—`	Called when the active tab changes.
`variant`	`"capsule" \| "underline"`	`"capsule"`	Visual treatment for the active surface.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the tab triggers.
`ariaLabel`	`string`	`"Tabs"`	Accessible label for the tab list.
`activeIndicatorClassName`	`string`	`Capsule uses the active surface token; underline uses foreground.`	Styling hook for the active surface.
`hoverClassName`	`string`	`"bg-[var(--fluid-tabs-hover)]"`	Optional styling hook for the supporting hover cue.
`className`	`string`	`—`	Additional classes for the root container.
`listClassName`	`string`	`—`	Additional classes for the tab list.