可篩選評價網格｜免費 React 元件

高密度的小型評價卡網格 React 元件，依產業分類篩選時卡片以 layout 動畫重排，hover 浮起並沿游標亮起邊框，點卡片在原位展開全文。

一次放進大量客戶評價的緊湊網格。標題下方的分類 chips 由每則評價的 category 自動收集，切換時被濾掉的卡片縮小淡出、留下的卡片以彈簧 layout 動畫滑到新位置，選中底塊跟著滑動。每張小卡有星等、三行截斷的引言、姓名縮寫漸層頭像與職稱公司；hover 或鍵盤聚焦時卡片浮起，邊框出現跟隨游標的強調色光斑；點擊卡片在原位展開全文，再點收回，一次只展開一張。目前分類支援受控／非受控雙模式。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add filterable-review-grid

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

欄數columns

顯示分類篩選filterable

重排彈簧剛性stiffness

350

hover 浮起時長（ms）duration

150

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<FilterableReviewGrid/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/filterable-review-grid.json

或在 components.json 設定 registries 後，改用 @webberui/filterable-review-grid 安裝。

使用

import { FilterableReviewGrid } from "@/components/ui/filterable-review-grid";

<FilterableReviewGrid
  eyebrow="客戶怎麼說"
  title="各行各業都在用"
  columns={4}
  testimonials={[
    {
      quote: "導入後櫃台結帳快了一倍，尖峰時段不再排到門外。",
      name: "林語晴",
      role: "店長",
      company: "青嶼咖啡",
      rating: 5,
      category: "餐飲",
      highlight: "結帳快了一倍",
    },
    {
      quote: "司機端的路線指引很直覺，查件電話少了一大半。",
      name: "王子豪",
      role: "物流主任",
      company: "北辰物流",
      rating: 4,
      category: "物流",
    },
  ]}
  onValueChange={(category) => console.log(category ?? "全部")}
/>

Props

Prop	型別	預設值	說明
`eyebrow`	`string`	—	標題上方的小標
`title`	`string`	—	區塊標題
`subtitle`	`string`	—	標題下方的說明文字
`testimonials`	`FilterableReviewGridItem[]`	—	評價資料陣列
`columns`	`2 \| 3 \| 4`	`4`	大螢幕的欄數（小螢幕自動遞減）
`filterable`	`boolean`	`true`	是否顯示分類篩選 chips；關閉時一律顯示全部評價
`allLabel`	`string`	`"全部"`	「全部」chip 的文字
`value`	`string \| null`	—	受控的目前分類（`null` 表示全部）；未提供時由元件內部管理
`defaultValue`	`string \| null`	`null`	非受控模式的初始分類
`onValueChange`	`(category: string \| null) => void`	—	分類切換時回呼，參數為新分類（`null` 表示全部）
`stiffness`	`number`	—	重排動畫的彈簧剛性；未提供時讀取 `--wb-filterable-review-grid-stiffness`（預設 350）
`duration`	`number`	—	卡片 hover 浮起的時長（毫秒）；未提供時讀取 `--wb-filterable-review-grid-duration`（預設 150ms）
`className`	`string`	—	併入根 section 的 class

FilterableReviewGridItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言全文
`name`	`string`	—	姓名
`role`	`string`	—	職稱
`company`	`string`	—	公司名稱
`rating`	`number`	—	星等（0–5）；未提供時不顯示星等列
`avatarHue`	`number`	—	頭像漸層色相（0–360）；未提供時依索引以黃金角度自動配色
`avatarSrc`	`string`	—	頭像圖片網址；提供時取代姓名縮寫漸層頭像
`highlight`	`string`	—	引言中要以強調色標記的片段
`metric`	`{ value: string; label: string }`	—	附帶的成效數字
`category`	`string`	—	產業分類；篩選 chips 由所有評價的 category 自動收集

細節

分類 chips 依評價陣列中 category 首次出現的順序排列；目前分類若已不在資料中，自動視為「全部」。切換分類時會收回展開中的卡片。
重排用 motion 的 layout 動畫與 AnimatePresence mode="popLayout"：被濾掉的卡片立即脫離版面、縮小淡出，其餘卡片同時以彈簧滑到新位置。
邊框光斑：滑鼠移動時把游標位置寫進卡片的 --x／--y CSS 變數（不觸發 React 重繪），邊框層以 radial-gradient 加 mask 只亮起 1px 外框。
頭像不需要照片：中文姓名取末兩字、拉丁姓名取首字母，搭配依索引以黃金角度（137.508°）分配色相的雙色漸層，確定性輸出、SSR 與客戶端一致。
節奏與色彩可用 CSS 變數覆寫：--wb-filterable-review-grid-stiffness（重排彈簧剛性，預設 350）、--wb-filterable-review-grid-duration（hover 浮起時長，預設 150ms）、--wb-filterable-review-grid-accent（強調色，預設 #0d9488，深色模式 #2dd4bf）。

可及性

根元素是 section，以 aria-labelledby 指向標題；每則評價以 figure／blockquote／figcaption 呈現
分類 chips 是一組帶 aria-pressed 的按鈕，包在 role="group" 中；篩選結果數量以 aria-live="polite" 朗讀（例如「顯示 8 則評價」）
每張卡片覆蓋一顆 type="button" 的展開按鈕，帶 aria-expanded 與 aria-controls 指向引言段落；鍵盤 Tab 聚焦時卡片同樣浮起並顯示 focus-visible 外框
星等列為 role="img"，aria-label 讀出「4 顆星（滿分 5 顆）」；裝飾用的點陣背景與漸層頭像對輔助科技隱藏
使用者系統開啟「減少動態效果」時，停用 layout 重排、縮放進退場與 hover 位移，卡片改以 150ms 淡入淡出切換，篩選與展開功能不變

可篩選評價網格

把這個效果裝進你的專案

Playground

安裝

使用

Props

FilterableReviewGridItem

細節

可及性

本頁目錄