色塊引言｜免費 React 元件

客戶評價 React 區塊：大面積色塊承載引言，點右側姓名列表切換時，色塊換色並輕微擠壓、選中色條滑到對應列、引言交叉淡接，色塊內有依 seed 生成的圓點或弧線紋理。

用一整塊顏色撐起一句客戶引言的評價區塊。左側是大色塊，放巨大的引言、作者與可選的成效數字；右側是作者列表，每列有姓名縮寫頭像、姓名與公司，作為分頁切換。切換時色塊背景換成這則評價的顏色並做一次 scaleX 彈簧擠壓，列表後方與色塊同色的選中色條從上一列滑到新列，引言舊的往上淡出、新的由下浮入；色塊內的生成式紋理（圓點陣或同心弧線）依 seed 決定性產生，換色時從中心向外重新浮現。字色依色塊亮度自動選白色或 neutral-900，對比維持 4.5:1 以上。選中索引支援受控／非受控雙模式，可選自動輪播。

把這個效果裝進你的專案

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

npx webberui@latest add color-block-quotes

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

Playground

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

自動輪播autoplay

輪播間隔（ms）interval

6000

切換時長（ms）duration

500

顯示生成紋理showPattern

紋理樣式pattern

import * as React from "react";

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

編輯中的呼叫預設屬性

<ColorBlockQuotes/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/color-block-quotes.json

或在 components.json 設定 registries 後，改用 @webberui/color-block-quotes 安裝。

使用

import { ColorBlockQuotes } from "@/components/ui/color-block-quotes";

<ColorBlockQuotes
  eyebrow="客戶回饋"
  title="小團隊也能做出好頁面"
  testimonials={[
    {
      quote: "換上新的訂位頁之後，週末候位的客人終於不用一直打電話來問。",
      name: "林語晴",
      role: "店長",
      company: "青嶼咖啡",
      highlight: "不用一直打電話來問",
      metric: { value: "−62%", label: "電話詢問量" },
    },
    {
      quote: "司機一打開就看得懂今天的路線，交接時間少了一半。",
      name: "陳柏宇",
      role: "營運主管",
      company: "北辰物流",
    },
  ]}
  onValueChange={(index) => console.log(`切換到第 ${index + 1} 則`)}
/>

Props

Prop	型別	預設值	說明
`testimonials`	`ColorBlockQuotesItem[]`	—	評價資料，依序對應右側的姓名列表
`eyebrow`	`string`	—	標題上方的小標
`title`	`string`	—	區塊標題；同時作為 section 的無障礙名稱
`subtitle`	`string`	—	標題下方的說明文字
`palette`	`string[]`	—	色票，依索引循環取色；未提供時用預設四色
`value`	`number`	—	受控的選中索引；未提供時由元件內部管理
`defaultValue`	`number`	`0`	非受控模式的初始選中索引
`onValueChange`	`(index: number) => void`	—	選中索引變動時回呼
`autoplay`	`boolean`	`false`	自動輪播；開啟時顯示暫停鈕
`interval`	`number`	`6000`	自動輪播間隔（毫秒），最小 1000
`seed`	`number`	`4`	生成式紋理的亂數種子
`showPattern`	`boolean`	`true`	是否在色塊內顯示生成式紋理
`pattern`	`"dots" \| "arcs"`	`"dots"`	紋理樣式：圓點陣或同心弧線
`pauseLabel`	`string`	`"暫停自動播放"`	暫停鈕文字（輪播中）
`playLabel`	`string`	`"繼續自動播放"`	暫停鈕文字（已暫停）
`listLabel`	`string`	`"選擇評價"`	姓名列表的無障礙名稱；沒有 title 時也作為 section 的名稱
`className`	`string`	—	附加到根 section 的 class

ColorBlockQuotesItem

欄位	型別	預設值	說明
`quote`	`string`	—	評價內文
`name`	`string`	—	評價者姓名；頭像取縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司或單位
`rating`	`number`	—	星等（1–5）；未提供時不顯示
`avatarHue`	`number`	—	頭像漸層色相；未提供時依索引以黃金角度（137.508°）分配
`highlight`	`string`	—	quote 中要加底線標記的片段，需與內文完全相符
`metric`	`{ value: string; label: string }`	—	色塊右下角的成效數字
`color`	`string`	—	這則評價的色塊顏色，優先於 `palette`
`textColor`	`string`	—	色塊上的字色；未提供時依亮度自動選擇

細節

預設色票對應 CSS 變數 --wb-color-block-quotes-1 到 -4（#0d9488、#d97706、#e11d48、#475569），可在主題裡覆寫；字色仍以預設色計算，覆寫成亮度差很多的顏色時請同時傳 textColor。
自動選字色直接比較白色與 neutral-900 兩者的對比值取大者，預設四色都在 4.5:1 以上。color／palette 只解析 #rgb、#rrggbb 與 rgb()，其他格式（例如 oklch()）會退回白字。
切換時長由 --wb-color-block-quotes-duration（預設 500ms）控制，色塊換色與引言淡接共用同一個值，曲線為 cubic-bezier(0.22, 1, 0.36, 1)；選中色條以 spring（stiffness 400、damping 34）滑動。
紋理用 mulberry32 依 seed 與選中索引產生，伺服器與瀏覽器輸出一致；圓點依離中心距離以 3ms 遞延浮現，整層 10% 不透明度、以字色繪製。
強調色（小標）走 --wb-color-block-quotes-accent，預設 #0d9488、深色模式 #2dd4bf。
自動輪播在滑鼠移入、鍵盤聚焦於區塊內、或分頁隱藏時暫停；按過暫停鈕後以使用者的選擇為準。

可及性

姓名列表為 role="tablist"、aria-orientation="vertical"，每列是 role="tab" 並以 aria-selected、aria-controls 關聯色塊；採 roving tabindex，↑／↓ 切換、Home／End 跳到第一則與最後一則
色塊為 role="tabpanel"，aria-labelledby 指向目前選中的分頁，可用 Tab 聚焦；非自動輪播時以 aria-live="polite" 朗讀新引言
引言以 figure、blockquote、figcaption 呈現；頭像與紋理為裝飾，對輔助科技隱藏
開啟自動輪播時一定顯示可見的暫停鈕（WCAG 2.2.2），按鈕帶有明確的文字標籤
字色依色塊亮度自動選擇，預設色票的文字對比皆 ≥ 4.5:1
使用者系統開啟「減少動態效果」時，自動輪播預設關閉（仍可按播放鈕開啟），色塊擠壓、色條滑動與引言位移改為 150ms 淡入，紋理不做逐點遞延

色塊引言

把這個效果裝進你的專案

Playground

安裝

使用

Props

ColorBlockQuotesItem

細節

可及性

本頁目錄