Bento Grid
便當網格佈局：卡片 stagger 進場，hover 時聚焦上浮、其餘卡片微降暗。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
0.08
0
<BentoGrid />
安裝
npx shadcn@latest add https://webberui.com/r/bento-grid.json或在 components.json 設定 registries 後，改用 @webberui/bento-grid 安裝。
安裝依賴後，複製 bento-grid.tsx 到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { BentoGrid, BentoCard } from "@/components/ui/bento-grid";
<BentoGrid columns={3}>
<BentoCard colSpan={2} title="特色功能" description="跨兩欄的主打卡片。" />
<BentoCard rowSpan={2} title="跨列卡片" description="縱向佔兩列。" />
<BentoCard title="標題" description="一般卡片。" />
<BentoCard title="自訂內容">
<img src="/chart.png" alt="統計圖表" />
</BentoCard>
</BentoGrid>Props
BentoGrid
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 直接放入 BentoCard 子元件 |
columns | number | 3 | 欄數（1–6） |
stagger | number | 0.08 | 卡片間進場間隔（秒） |
delay | number | 0 | 進場前延遲（秒） |
once | boolean | true | 只在第一次進入視口時播放 |
className | string | — | 附加到網格容器的 class |
BentoCard
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colSpan | number | 1 | 橫向跨欄數（1–6） |
rowSpan | number | 1 | 縱向跨列數（1–6） |
title | React.ReactNode | — | 卡片標題 |
description | React.ReactNode | — | 卡片描述 |
children | React.ReactNode | — | 任意自訂內容（圖表、圖片等），置於標題上方 |
className | string | — | 附加到卡片的 class |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染靜態網格，無進場動畫與 hover 位移
- 卡片標題以
<h3>語意標籤呈現，輔助科技可依標題導覽 - hover 降暗僅是視覺提示（opacity 最低 0.7），內容仍保持可讀，且不影響鍵盤操作與焦點