行銷展示區塊
功能比較矩陣
方案功能對照表：sticky 首欄與表頭、差異列高亮、勾叉動畫。
完整的方案功能比較表 section：左側功能名欄與頂部方案列皆為 sticky，捲動時不迷路；儲存格支援勾/叉描邊動畫與文字值，進場逐列 stagger，右上角「只看差異」可過濾各方案相同的列（收合補位動畫），推薦方案整欄套用強調底色。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/feature-compare-matrix.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
440
編輯中的呼叫預設屬性
<FeatureCompareMatrix/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/feature-compare-matrix.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/feature-compare-matrix 安裝。
使用
import { FeatureCompareMatrix } from "@/components/ui/feature-compare-matrix";
<FeatureCompareMatrix
plans={[
{ name: "入門", price: "NT$0" },
{ name: "專業", price: "NT$320/月", highlighted: true },
]}
features={[
{ label: "自訂網域", values: [false, true] },
{ label: "版本歷史", values: ["7 天", "無上限"] },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
plans | ComparePlan[] | — | 方案清單（表格的欄），建議 2–4 個 |
features | CompareFeature[] | — | 功能清單（表格的列） |
showDiffToggle | boolean | true | 是否顯示右上角「只看差異」切換鈕 |
defaultDiffOnly | boolean | false | 「只看差異」的預設狀態 |
maxHeight | number | 440 | 捲動區最大高度（px），超出時垂直捲動、表頭保持 sticky |
className | string | — | 透傳到最外層容器 |
ComparePlan：
| 欄位 | 型別 | 說明 |
|---|---|---|
name | string | 方案名稱，顯示於表頭 |
price | string? | 價格文字，顯示於方案名下方 |
highlighted | boolean? | 推薦方案：整欄強調底色＋表頭「推薦」徽章 |
CompareFeature：
| 欄位 | 型別 | 說明 |
|---|---|---|
label | string | 功能名稱，顯示於 sticky 首欄 |
values | (boolean | string)[] | 各方案的值，順序對應 plans：boolean 顯示勾/叉、string 顯示文字，缺值視為不含 |
可及性
- 表格以 ARIA
role="table"/row/columnheader/rowheader/cell標記結構，勾叉圖示另附sr-only文字（「包含」/「不含」）供螢幕閱讀器朗讀 - 「只看差異」切換鈕為
role="switch"並回報aria-checked狀態 - 捲動區可鍵盤聚焦（
tabIndex=0、附aria-label），以方向鍵即可捲動表格 - 使用者系統開啟「減少動態效果」時，停用逐列進場、勾叉描邊與收合補位動畫，內容直接完整顯示