描邊膠囊步驟條

把多步驟流程收進一顆膠囊裡。進場時一條描邊從左側中間起筆、順時針畫出膠囊外框，描完後內部的步驟 pill 依序淡入；推進時已完成的步驟填上強調色並描出白勾，進行中的步驟帶著細微的呼吸光暈，同時第二條強調色描邊沿著外框前進到完成比例——外框本身就是一條進度條。精簡模式下只有進行中的步驟展開顯示文字，其餘只留圖示或序號。步驟索引支援受控／非受控雙模式，也能自動依序推進。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DrawnCapsuleStepper/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/drawn-capsule-stepper.json

使用

import { Package, Rocket, Store } from "lucide-react";
import { DrawnCapsuleStepper } from "@/components/ui/drawn-capsule-stepper";

const steps = [
  { id: "create", label: "建立商店", icon: <Store /> },
  { id: "upload", label: "上傳商品", icon: <Package /> },
  { id: "launch", label: "開始營業", icon: <Rocket /> },
];

// 非受控 + 自動推進
<DrawnCapsuleStepper steps={steps} autoPlay />

// 受控：由外部按鈕控制目前步驟
const [current, setCurrent] = React.useState(0);

<DrawnCapsuleStepper
  steps={steps}
  current={current}
  onCurrentChange={setCurrent}
  compact={false}
  clickable
/>

Props

DrawnCapsuleStep

細節

• 外框是自組的膠囊 <path>（圓角 = 高度的一半），而不是 <rect rx>：這樣描邊才能從左側中間起筆、順時針繞行。容器尺寸由 ResizeObserver 量測，寬度改變時路徑跟著重算。
• 描邊以 pathLength 0→1 畫出，easing 為 [0.65, 0, 0.35, 1]；描完後步驟 pill 以 60ms 間隔依序淡入。進度描邊在這之後才開始，沿同一條路徑以 spring（stiffness 120、damping 20）前進到「已完成數 ÷ 總步驟數」。
• 進行中步驟的寬度變化以 layout 動畫展開，已完成步驟的白勾以 240ms 描出。
• CSS 變數：--wb-drawn-capsule-draw（預設 900ms，同 drawDuration）、--wb-drawn-capsule-stagger（60ms）、--wb-drawn-capsule-accent（同 accent），可在外層覆寫顏色以跟上你的主題。
• autoPlay 從描邊與淡入結束後才開始計時；走到全部完成後，再等一個 interval 回到第一步。

可及性

• 步驟容器為 role="list"、aria-label="設定進度"，每個步驟為 role="listitem"；進行中的步驟設定 aria-current="step"
• 已完成步驟附有僅螢幕閱讀器可讀的「已完成」；精簡模式下隱藏的標籤仍以 sr-only 文字保留，不會遺失名稱
• clickable 時已完成步驟是 type="button" 的原生按鈕，可用 Tab 聚焦、Enter／空白鍵觸發，並有 focus-visible 外框
• 步驟變化寫入 aria-live="polite" 區域，例如「第 2 步，共 4 步：上傳商品」
• 外框 SVG 與圖示、序號、脈動光暈皆設 aria-hidden
• 使用者系統開啟「減少動態效果」時，外框直接出現、進度描邊直接跳到目標位置、步驟不淡入也沒有脈動光暈