KPI 迷你趨勢卡
數值滾動進場、內嵌 sparkline 折線與漲跌徽章的指標卡。
儀表板常用的 KPI 指標卡：進入視窗時大數字由 0 滾動累加、SVG sparkline 以描邊動畫畫出趨勢曲線並淡入線下漸層，右上角彈出綠升紅降的百分比徽章，卡片依序 stagger 進場。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1.4
1.1
0.12
<KpiSparklineCards />
安裝
npx shadcn@latest add https://webberui.com/r/kpi-sparkline-cards.json或在 components.json 設定 registries 後，改用 @webberui/kpi-sparkline-cards 安裝。
安裝依賴後，從 registry JSON（/r/kpi-sparkline-cards.json 的 files[0].content）複製 kpi-sparkline-cards.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { KpiSparklineCards } from "@/components/ui/kpi-sparkline-cards";
<KpiSparklineCards
items={[
{
label: "本月營收",
value: 1284500,
delta: 12.4,
prefix: "NT$",
series: [42, 48, 45, 52, 58, 63, 70, 76],
},
{
label: "轉換率",
value: 3.62,
delta: -1.8,
suffix: "%",
decimals: 2,
series: [52, 50, 47, 44, 41, 38],
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | KpiSparklineItem[] | — | KPI 指標卡的資料清單 |
countDuration | number | 1.4 | 大數字滾動累加的時長（秒） |
drawDuration | number | 1.1 | sparkline 描邊動畫的時長（秒） |
stagger | number | 0.12 | 卡片依序進場的間隔（秒） |
className | string | — | 透傳到外層網格容器 |
KpiSparklineItem 欄位：
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
label | string | — | 指標名稱，顯示於卡片左上角 |
value | number | — | 指標數值，進場時由 0 滾動累加至此值 |
delta | number | — | 相較前期的漲跌百分比：正值綠色、負值紅色、0 為中性灰 |
series | number[] | — | 迷你趨勢折線的資料數列（建議至少 6 個點） |
prefix | string | — | 數值前綴，例如 "NT$" |
suffix | string | — | 數值後綴，例如 "%" |
decimals | number | 0 | 數值顯示的小數位數 |
可及性
- 使用者系統開啟「減少動態效果」時，數字直接顯示最終值、折線立即完整呈現，不播放滾動與描邊動畫
- 每張卡片提供
sr-only完整摘要（指標名稱、最終數值與漲跌方向），動畫中的數字與 sparkline 對輔助科技隱藏（aria-hidden），避免朗讀跳動中的過渡值 - 漲跌不單靠顏色傳達：徽章同時以箭頭方向圖示與文字百分比表達趨勢
- 大數字使用
tabular-nums，滾動累加過程中版面寬度穩定不抖動