流體頁籤
指示條如液體般拉伸跟隨的頁籤，內容方向感切換。
底部指示條以「前緣快、後緣慢」的雙彈簧追蹤選中頁籤，移動途中像液體般先拉長再收縮；內容面板依切換方向滑入滑出，帶出清楚的空間方向感，支援受控與非受控兩種模式。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<FluidTabs />
安裝
npx shadcn@latest add https://webberui.com/r/fluid-tabs.json或在 components.json 設定 registries 後，改用 @webberui/fluid-tabs 安裝。
安裝依賴後，從 registry JSON（/r/fluid-tabs.json 的 files[0].content）複製 fluid-tabs.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { FluidTabs } from "@/components/ui/fluid-tabs";
const tabs = [
{ value: "overview", label: "總覽", content: <p>總覽內容</p> },
{ value: "analytics", label: "分析", content: <p>分析內容</p> },
{ value: "settings", label: "設定", content: <p>設定內容</p> },
];
<FluidTabs tabs={tabs} defaultValue="overview" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
tabs | FluidTabItem[] | — | 頁籤清單，每項含 value、label 與可選的 content；全部未提供 content 時僅作導覽列 |
value | string | — | 受控模式的當前頁籤值，需搭配 onChange |
defaultValue | string | 第一個頁籤 | 非受控模式的初始頁籤值 |
onChange | (value: string) => void | — | 頁籤切換時的回呼，帶入新的 value |
indicatorClassName | string | — | 自訂底部指示條的樣式（顏色、高度等） |
className | string | — | 透傳到最外層容器 |
可及性
- 完整實作
role="tablist"/role="tab"/role="tabpanel"，並以aria-selected、aria-controls、aria-labelledby建立關聯 - 支援鍵盤操作：左右方向鍵循環切換並自動啟用、
Home/End跳至首尾頁籤，焦點以 roving tabindex 管理 - 使用者系統開啟「減少動態效果」時，指示條直接定位、內容面板僅淡入淡出，不做位移與模糊動畫
- 指示條為純裝飾元素，以
aria-hidden對輔助科技隱藏