定價試算器
用量滑桿即時試算月費的互動定價區塊，方案自動推薦。
拖動用量滑桿即時試算各方案月費：價格數字以 spring 滾動更新，用量超過門檻時「推薦」徽章自動跳到合適的方案卡並高亮，切換年繳套用折扣，底部費用明細逐項浮現，適合 SaaS 定價頁。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
50
8
0.8
<PricingCalculator />
安裝
npx shadcn@latest add https://webberui.com/r/pricing-calculator.json或在 components.json 設定 registries 後，改用 @webberui/pricing-calculator 安裝。
安裝依賴後，從 registry JSON（/r/pricing-calculator.json 的 files[0].content）複製 pricing-calculator.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { PricingCalculator } from "@/components/ui/pricing-calculator";
<PricingCalculator
min={1}
max={50}
defaultValue={8}
yearlyDiscount={0.8}
tiers={[
{
name: "入門",
description: "小型團隊起步",
basePrice: 0,
perUnit: 150,
upTo: 5,
features: ["3 個專案", "基本數據分析"],
},
{
name: "專業",
description: "成長中的團隊",
basePrice: 600,
perUnit: 120,
upTo: null,
features: ["無限專案", "進階數據分析"],
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
tiers | PricingTier[] | — | 方案設定，依用量門檻由低至高排序 |
min | number | 1 | 滑桿最小用量 |
max | number | 50 | 滑桿最大用量 |
step | number | 1 | 滑桿步進值 |
defaultValue | number | 8 | 預設用量 |
unitLabel | string | "席次" | 用量單位標籤 |
currency | string | "NT$" | 貨幣符號前綴 |
yearlyDiscount | number | 0.8 | 年繳折扣倍率（0.8 = 8 折） |
className | string | — | 透傳到最外層容器 |
PricingTier 欄位：
| 欄位 | 型別 | 說明 |
|---|---|---|
name | string | 方案名稱 |
description | string | 一句話方案說明 |
basePrice | number | 每月基礎費用 |
perUnit | number | 每單位每月加收費用 |
upTo | number | null | 建議用量上限，超過即推薦下一個方案；null 表示無上限 |
features | string[] | 方案特色清單 |
可及性
- 滑桿為原生
input[type="range"]，支援鍵盤方向鍵調整，並帶aria-label與aria-valuetext（含單位） - 月繳／年繳切換為
role="group"內的按鈕，以aria-pressed表達目前狀態 - 每月總計包在
aria-live="polite"區域，用量或週期變動時輔助科技會播報新價格 - 使用者系統開啟「減少動態效果」時，價格數字直接跳至最終值，卡片縮放、徽章移動與明細浮現動畫全部停用
- 裝飾性圖示（Users、Check、Sparkles）皆標記
aria-hidden