Pricing Table

月繳／年繳 segmented 切換的定價表，切換時價格數字 spring 補間、選中底塊滑動，主打方案放大高亮，年繳顯示折扣標籤。

載入預覽⋯

Playground

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

幣別符號currency

表格寬度className

<PricingTable />

安裝

npx shadcn@latest add https://webberui.com/r/pricing-table.json

或在 components.json 設定 registries 後，改用 @webberui/pricing-table 安裝。

安裝依賴後，從 registry JSON（/r/pricing-table.json 的 files[0].content）複製 pricing-table.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge lucide-react

使用

import { PricingTable, type PricingPlan } from "@/components/ui/pricing-table";

const plans: PricingPlan[] = [
  {
    name: "Free",
    monthly: 0,
    yearly: 0,
    features: ["1 位使用者", "基本分析", "社群支援"],
    cta: "免費開始",
  },
  {
    name: "Pro",
    monthly: 12,
    yearly: 115,
    features: ["5 位使用者", "進階分析", "電子郵件支援"],
    highlighted: true,
    cta: "升級 Pro",
  },
  {
    name: "Team",
    monthly: 32,
    yearly: 300,
    features: ["無限使用者", "完整分析", "優先支援"],
    cta: "聯絡我們",
  },
];

<PricingTable plans={plans} currency="$" />;

計費週期切換由元件內部管理——monthly 與 yearly 各填「該週期的實際金額」即可。折扣標籤自動以年繳相對「月繳 ×12」的節省比例計算，僅在有節省時於年繳模式顯示。highlighted 方案會放大、邊框高亮並附上徽章。

Props

PricingTable

Prop	型別	預設值	說明
`plans`	`PricingPlan[]`	—	方案清單，並排顯示
`currency`	`string`	`"$"`	幣別符號，接在價格數字前
`className`	`string`	—	附加到最外層容器的 class

PricingPlan

欄位	型別	說明
`name`	`string`	方案名稱
`monthly`	`number`	月繳價格（每月金額）
`yearly`	`number`	年繳價格（每年金額），用來計算折扣
`features`	`string[]`	特色列表，每列前綴一個 Check 圖示
`highlighted`	`boolean`	標記為主打方案：卡片放大、邊框高亮並顯示徽章（可選）
`cta`	`string`	CTA 按鈕文字，未指定時為「開始使用」（可選）

細節

週期切換器：月繳／年繳為 segmented control，選中底塊以 Motion layoutId 共享佈局在兩檔之間 spring 滑動，而非淡出重繪
價格 spring 補間：切換週期時，每張卡的價格以 MotionValue 直接寫入 DOM（不觸發 React re-render），spring 過渡到新值，千分位逗號、捨入到整數顯示
折扣標籤：年繳模式下，若年繳價低於「月繳 ×12」，於價格下方以 AnimatePresence 淡入「年繳省 N%」標籤；標籤置於固定高度插槽，出現／消失不推擠版面
主打方案：highlighted 卡片在 sm 以上放大（scale-[1.03]）、加粗邊框高亮、抬升 z-index 並於頂端顯示「推薦」徽章，CTA 改為實心按鈕
等高並排：卡片以 grid 並排，sm 以下自動堆疊為單欄

可及性

使用者系統開啟「減少動態效果」時，切換底塊取消 layoutId（直接出現在新檔位）、價格直接顯示最終值、折扣標籤不播淡入淡出（首渲染與 SSR 一致，掛載後才切換靜態）
切換器為 role="group" 並帶 aria-label，兩個選項以 aria-pressed 標示目前週期
價格區塊帶 aria-label（含幣別、金額與週期），補間中的滾動數字對輔助科技隱藏（aria-hidden），螢幕閱讀器只會朗讀最終值
特色前綴的 Check 圖示為裝飾性元素，標記 aria-hidden；特色以語意化的 <ul> 清單呈現

On this page