Fluid Tabs
Tabs whose indicator stretches like a liquid as it follows along, with directional content switching.
The bottom indicator tracks the selected tab with a dual spring — fast leading edge, slow trailing edge — so it stretches like a liquid mid-travel and then contracts; the content panel slides in and out according to the switch direction, giving a clear sense of spatial direction, and both controlled and uncontrolled modes are supported.
Loading preview…
npx shadcn@latest add https://webberui.com/r/fluid-tabs.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<FluidTabs />
Installation
npx shadcn@latest add https://webberui.com/r/fluid-tabs.jsonOr, once registries are configured in components.json, install it as @webberui/fluid-tabs.
Usage
import { FluidTabs } from "@/components/ui/fluid-tabs";
const tabs = [
{ value: "overview", label: "Overview", content: <p>Overview content</p> },
{ value: "analytics", label: "Analytics", content: <p>Analytics content</p> },
{ value: "settings", label: "Settings", content: <p>Settings content</p> },
];
<FluidTabs tabs={tabs} defaultValue="overview" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | FluidTabItem[] | — | The tab list; each item has value, label, and an optional content. When none of them provide content, it acts purely as a navigation bar |
value | string | — | The current tab value in controlled mode; use it together with onChange |
defaultValue | string | first tab | Initial tab value in uncontrolled mode |
onChange | (value: string) => void | — | Callback fired when the tab changes, receiving the new value |
indicatorClassName | string | — | Custom styling for the bottom indicator (color, height, and so on) |
className | string | — | Forwarded to the outermost container |
Accessibility
- Fully implements
role="tablist"/role="tab"/role="tabpanel", wiring them together witharia-selected,aria-controls, andaria-labelledby - Keyboard support: the left and right arrow keys cycle through and activate tabs automatically,
Home/Endjump to the first and last tab, and focus is managed with a roving tabindex - When the user has "reduce motion" enabled at the system level, the indicator snaps into position and the content panel only fades in and out, with no displacement or blur animation
- The indicator is decorative only and is hidden from assistive technology with
aria-hidden