卡片與網格
Chroma Grid
灰階卡片網格，游標經過時以聚光燈局部顯色。
一組預設灰階的卡片網格，游標移動時像手電筒一樣照亮周圍，讓經過的卡片顯露全彩，離開即淡回灰階。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add chroma-gridPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
260
160
編輯中的呼叫預設屬性
<ChromaGrid/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/chroma-grid.json或在 components.json 設定 registries 後，改用 @webberui/chroma-grid 安裝。
使用
import { ChromaGrid, type ChromaGridItem } from "@/components/ui/chroma-grid";
const items: ChromaGridItem[] = [
{
title: "Aurora",
subtitle: "Product Designer",
gradient: "linear-gradient(150deg, #22d3ee, #0e7490)",
glowColor: "#22d3ee",
},
// ...
];
<ChromaGrid items={items} columns={3} radius={240} />Props
ChromaGrid
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | ChromaGridItem[] | — | 卡片資料 |
columns | number | 3 | 網格欄數 |
radius | number | 260 | 顯色聚光燈半徑（px） |
cardHeight | number | 260 | 單張卡片高度（px） |
className | string | — | 附加到最外層容器的 class |
ChromaGridItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 卡片主標題 |
subtitle | string | — | 次要說明文字 |
handle | string | — | 右下角小標籤 |
gradient | string | linear-gradient(...) | 卡片漸層底色，任何合法 CSS background 值 |
glowColor | string | #6366f1 | 邊框與光暈顏色 |
可及性
- 使用者系統開啟「減少動態效果」時，直接呈現全彩靜態網格，不追蹤游標、不做灰階
- 顯色層與聚光燈皆為
aria-hidden純裝飾，底層卡片文字維持可讀