便利貼牆
軟木板上的彩色便利貼：拖曳、新增、揉掉刪除。
一面 CSS 紋理軟木板，貼滿帶著微旋轉與膠帶／圖釘裝飾的彩色便利貼：可自由拖曳移動、雙擊編輯文字、按下 ✕ 便揉成一團紙球丟出，右下角一鍵新增自動配色的新便利貼，適合待辦牆、腦力激盪板等趣味場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
300
<StickyNoteBoard />
安裝
npx shadcn@latest add https://webberui.com/r/sticky-note-board.json或在 components.json 設定 registries 後，改用 @webberui/sticky-note-board 安裝。
安裝依賴後，從 registry JSON（/r/sticky-note-board.json 的 files[0].content）複製 sticky-note-board.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { StickyNoteBoard, type StickyNote } from "@/components/ui/sticky-note-board";
const notes: StickyNote[] = [
{ id: "milk", text: "下班買牛奶 🥛", x: 24, y: 22, color: 0 },
{ id: "gym", text: "週三 19:00 健身房", x: 200, y: 120, color: 2 },
];
<StickyNoteBoard notes={notes} height={400} onChange={(next) => console.log(next)} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
notes | StickyNote[] | [] | 初始便利貼資料；之後由元件內部管理，異動經 onChange 回報 |
onChange | (notes: StickyNote[]) => void | — | 拖曳、編輯、新增、揉掉任一異動後，回傳最新的便利貼陣列 |
height | number | 380 | 軟木板高度（px） |
addLabel | string | "新增便利貼" | 新增按鈕的文字 |
showAdd | boolean | true | 是否顯示右下角的新增按鈕 |
className | string | — | 透傳到最外層（木框）容器 |
StickyNote 型別
| 欄位 | 型別 | 說明 |
|---|---|---|
id | string | 唯一識別碼，同時作為旋轉角度與圖釘／膠帶樣式的決定性雜湊種子 |
text | string | 便利貼上的文字內容 |
x | number | 相對板面左上角的 X 座標（px） |
y | number | 相對板面左上角的 Y 座標（px） |
color | number | 色票索引 0–5（黃/粉/綠/藍/橘/紫），未指定時依 id 雜湊自動配色 |
可及性
- 每張便利貼皆可鍵盤聚焦：
Enter進入編輯、方向鍵移動（Shift加速）、Delete/Backspace揉掉刪除 - 便利貼以
role="group"搭配aria-label朗讀內容，揉掉按鈕有明確的aria-label - 編輯中
Esc取消還原原文、Cmd/Ctrl + Enter或失焦即提交 - 使用者系統開啟「減少動態效果」時，進場、拖起放大與揉紙動畫皆改為單純淡入淡出
- 旋轉角度與裝飾樣式由
id決定性雜湊產生，SSR 與 client 渲染結果一致