Stepper
獨立的多步驟進度 stepper 指示器，支援勾號描繪、連接線填充與活躍脈動。
以圓點與連接線呈現多步驟流程進度，完成的步驟顯示勾號、連接線平滑填滿，活躍步驟帶脈動指示。支援水平與垂直排列。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
36
<Stepper />
安裝
npx shadcn@latest add https://webberui.com/r/stepper.json或在 components.json 設定 registries 後，改用 @webberui/stepper 安裝。
安裝依賴後，從 registry JSON（/r/stepper.json 的 files[0].content）複製 stepper.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { Stepper } from "@/components/ui/stepper";
const steps = [
{ title: "帳號", description: "建立登入資訊" },
{ title: "個人資料", description: "填寫基本資料" },
{ title: "完成", description: "確認並送出" },
];
<Stepper steps={steps} current={1} />;current 為 0-based 索引：小於它的步驟視為完成，等於它的為活躍，大於它的為未完成。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
steps | StepperStep[] | — | 步驟清單，每項含 title 與選填 description |
current | number | — | 目前步驟索引（0-based）；小於它的步驟為完成 |
orientation | "horizontal" | "vertical" | "horizontal" | 排列方向 |
size | number | 36 | 圓點直徑（px），連接線對齊其中心 |
className | string | — | 透傳至最外層容器 |
StepperStep 型別為 { title: string; description?: string }。
可及性
- 容器帶
role="list"與aria-label，各步驟為role="listitem" - 活躍步驟帶
aria-current="step" - 使用者系統開啟「減少動態效果」時，關閉脈動與描繪動畫，直接呈現最終狀態