Sticker Board
A free composition of photos, stickers and notes to move and rotate. Free, MIT · Work and teams › Canvases, selection and budgets
A free board of photos, stickers and notes. Select an item to drag it, turn it by its handle or by steps, and bring it forward or back; arrow keys and toolbar buttons do the same without a pointer. Coordinates live in the board's own system, so the composition scales with the width. A drag moves only the dragged item in the DOM and reports the new layout once, on release; Escape cancels a gesture, Undo steps back through the confirmed layouts.
Installation
npx valyro-cli@latest add sticker-boardnpx shadcn@latest add https://valyro.xyz/r/sticker-board.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { StickerBoard } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
items | StickerItem[] | The layout: items with centre, size, angle and stacking order in canvas units. Never changed in place. | |
defaultItems | StickerItem[] | [] | Initial layout when uncontrolled. |
onItemsChange | (items: StickerItem[], reason: StickerChangeReason) => void | Called with the proposed layout after a finished move, turn, restack or undo. | |
canvasSize * | BoardSize | The board's coordinate system. Items keep their place relative to it at any width. | |
selectedId | string | null | Id of the selected item, or null. | |
defaultSelectedId | string | null | null | Initial selectedId when uncontrolled. |
onSelectedIdChange | (id: string | null) => void | Called with the new selectedId when it changes. | |
bounds | 'contain' | 'partial' | 'contain' | contain (default) keeps whole turned items on the board; partial lets edges hang over, the centre stays on. |
snap | number | 0 | Grid step in canvas units for moves; 0 (default) turns snapping off. |
rotationStep | number | 15 | Degrees per turn of the toolbar buttons; Shift snaps the turn handle to it. Default 15. |
readOnly | boolean | false | Shows the layout without editing. |
labels | Partial<StickerBoardLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Lasso Select — Drag a rectangle to select a group of cards
- Priority Budget — Share a fixed budget of points between items
- Calendar View — Event calendar
- Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
- Kanban Board — Task board
- Gantt Chart — Gantt charts with dependencies and drag to reschedule
- Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
- CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
- Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
- Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
- Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
- Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Previous: Rich Text Editor · Next: Lasso Select · All Work and teams