Sticky Note Board
Colourful sticky notes on a cork board: drag, add, and crumple to delete.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
A cork board rendered with CSS texture, covered in colourful sticky notes with slight rotation and tape / pushpin decorations: drag them freely, double-click to edit the text, press ✕ to crumple one into a paper ball and toss it away, and add a new auto-coloured note with one click in the bottom right — good for to-do walls, brainstorming boards, and other playful scenarios.
npx shadcn@latest add "https://webberui.com/r/sticky-note-board.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<StickyNoteBoard />
Installation
npx shadcn@latest add "https://webberui.com/r/sticky-note-board.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/sticky-note-board.
Usage
import { StickyNoteBoard, type StickyNote } from "@/components/ui/sticky-note-board";
const notes: StickyNote[] = [
{ id: "milk", text: "Buy milk after work 🥛", x: 24, y: 22, color: 0 },
{ id: "gym", text: "Gym Wed 19:00", x: 200, y: 120, color: 2 },
];
<StickyNoteBoard notes={notes} height={400} onChange={(next) => console.log(next)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
notes | StickyNote[] | [] | Initial note data; from then on the component manages it internally and reports changes through onChange |
onChange | (notes: StickyNote[]) => void | — | Returns the latest note array after any drag, edit, addition, or crumple |
height | number | 380 | Cork board height (px) |
addLabel | string | "新增便利貼" | Text of the add button |
showAdd | boolean | true | Whether to show the add button in the bottom right |
className | string | — | Forwarded to the outermost (wooden frame) container |
StickyNote type
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier, also the deterministic hash seed for the rotation angle and the pushpin / tape style |
text | string | Text content on the note |
x | number | X coordinate relative to the board's top-left corner (px) |
y | number | Y coordinate relative to the board's top-left corner (px) |
color | number | Swatch index 0–5 (yellow/pink/green/blue/orange/purple); when unspecified, the colour is derived from the id hash |
Accessibility
- Every note is keyboard-focusable:
Enterenters edit mode, arrow keys move it (Shiftaccelerates),Delete/Backspacecrumples and deletes it - Notes use
role="group"witharia-labelto read out their content, and the crumple button has an explicitaria-label - While editing,
Esccancels and restores the original text, andCmd/Ctrl + Enteror blurring submits - When the user has "reduce motion" enabled at the system level, the reveal, pick-up scaling, and paper-crumple animations all become plain fade in / fade out
- The rotation angle and decoration style are produced by a deterministic hash of the
id, so SSR and client rendering match