儀表盤
指針儀表盤：spring 擺動指針、分段色弧、數值滾動。
SVG 半圓儀表盤，指針以低阻尼 spring 轉到目標值、帶過衝回穩的擺動感；分段色弧（綠黃紅可自訂 stops）搭配刻度線，中央數值與指針共用同一條 spring 同步滾動，指針尚未到達的色段會降低透明度。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
72
240
0
<GaugeMeter />
安裝
npx shadcn@latest add https://webberui.com/r/gauge-meter.json或在 components.json 設定 registries 後，改用 @webberui/gauge-meter 安裝。
安裝依賴後，從 registry JSON（/r/gauge-meter.json 的 files[0].content）複製 gauge-meter.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { GaugeMeter } from "@/components/ui/gauge-meter";
<GaugeMeter
value={72}
unit="%"
label="CPU 使用率"
stops={[
{ to: 60, color: "#10b981", label: "順暢" },
{ to: 85, color: "#f59e0b", label: "偏高" },
{ to: 100, color: "#ef4444", label: "過載" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | number | — | 目標值，變更時指針以 spring 擺動過去（帶過衝回穩） |
min | number | 0 | 量表最小值 |
max | number | 100 | 量表最大值 |
stops | GaugeStop[] | 綠黃紅預設 | 分段色弧設定，每段為 { to, color, label? }，未提供時使用 60% / 85% / 100% 的綠黃紅 |
unit | string | — | 數值後方的單位文字，例如 "%"、"km/h" |
label | string | — | 儀表標題，顯示於儀表下方 |
size | number | 240 | 儀表寬度（px），高度依 200:148 比例自動縮放 |
decimals | number | 0 | 中央數值顯示的小數位數 |
className | string | — | 透傳到外層容器 |
GaugeStop：to 為此色段的結束值（各段需遞增，最後一段建議等於 max）、color 為任何合法 CSS 顏色、label 為當前值落在此段時顯示的狀態文字。
可及性
- 容器使用
role="meter"搭配aria-valuemin/aria-valuemax/aria-valuenow與aria-valuetext，輔助科技朗讀的是目標值而非動畫中間值 - SVG 本體標記
aria-hidden，避免與 meter 語意重複朗讀 - 使用者系統開啟「減少動態效果」時，指針與數字直接跳至目標值，不播放 spring 擺動
- 數值使用
tabular-nums等寬數字，滾動時版面不抖動