Chroma Grid
灰階卡片網格，游標經過時以聚光燈局部顯色。
一組預設灰階的卡片網格，游標移動時像手電筒一樣照亮周圍，讓經過的卡片顯露全彩，離開即淡回灰階。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
260
160
<ChromaGrid />
安裝
npx shadcn@latest add https://webberui.com/r/chroma-grid.json或在 components.json 設定 registries 後，改用 @webberui/chroma-grid 安裝。
安裝依賴後，從 registry JSON（/r/chroma-grid.json 的 files[0].content）複製 chroma-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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純裝飾，底層卡片文字維持可讀