Hover Highlight Cards
hover 時背景高亮滑動至當前卡片。
滑鼠移動時，一塊高亮背景會以彈簧動畫從上一張卡片滑動到目前指向的卡片，鍵盤 focus 也會觸發。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
260
30
<HoverHighlightCards />
安裝
npx shadcn@latest add https://webberui.com/r/hover-highlight-cards.json或在 components.json 設定 registries 後，改用 @webberui/hover-highlight-cards 安裝。
安裝依賴後，從 registry JSON（/r/hover-highlight-cards.json 的 files[0].content）複製 hover-highlight-cards.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { HoverHighlightCards } from "@/components/ui/hover-highlight-cards";
<HoverHighlightCards
columns={2}
items={[
{ title: "動畫優先", description: "內建到位的進場與互動動效。" },
{ title: "即裝即用", description: "一行指令加入專案。" },
]}
/>;每個 item 可帶 icon（任意 React 節點）與 href，有 href 時卡片會渲染為連結。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | HoverHighlightItem[] | — | 卡片資料，欄位見下表 |
columns | 1 | 2 | 3 | 4 | 3 | 桌機下的欄數 |
highlightClassName | string | "bg-neutral-200/70 …" | 高亮色塊的背景樣式 |
stiffness | number | 260 | 高亮滑動的彈簧剛性 |
damping | number | 30 | 高亮滑動的彈簧阻尼 |
className | string | — | 外層 grid 的額外樣式 |
HoverHighlightItem
| 欄位 | 型別 | 說明 |
|---|---|---|
title | string | 卡片標題 |
description | string | 卡片說明（選填） |
icon | React.ReactNode | 左上角圖示（選填） |
href | string | 連結網址，有值時卡片為 a（選填） |
可及性
- 使用者系統開啟「減少動態效果」時，高亮不做彈簧滑動，直接淡入淡出
- 卡片可用鍵盤 focus 觸發高亮，並帶有
focus-visible外框 - 高亮色塊標記
aria-hidden，不影響輔助科技朗讀