Back to components
ComponentBoardFree
Sticky Notes Wall React component
A tactile thinking space with editable pastel notes, pointer and keyboard rearranging, category filters, pinning and a quick-add toolbar.
About the Sticky Notes Wall component
An editable wall for brainstorming, research and lightweight planning. Notes can be filtered, pinned, rearranged with pointer input or moved using the drag handle's arrow keys.
When to use it
Collect workshop ideas or research observations.
Arrange small tasks on a shared-looking personal workspace.
Installation
Add the Sticky Notes Wall component to your project with the shadcn CLI. It lands in components/sticky-notes-wall.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/sticky-notes-wallOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<StickyNotesWall /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Product discovery" |
| description | string | "A shared space for early thoughts, research, and what comes next." |
| theme | "dark" | "light" | "dark" |
| initialNotes | WallNote[] | seed |
| onNotesChange | (notes: WallNote[]) => void | — |
| className | string | — |
- titlestringDefault: "Product discovery"
- descriptionstringDefault: "A shared space for early thoughts, research, and what comes next."
- theme"dark" | "light"Default: "dark"
- initialNotesWallNote[]Default: seed
- onNotesChange(notes: WallNote[]) => void
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Sticky Notes Wall FAQ
- Are notes saved automatically?
- Notes live in component state. Use initialNotes to initialize a board and onNotesChange to persist changes in your own storage. This component does not include a collaboration server.
- How do I edit or move a note?
- Click the note body to edit; blur or press Escape to finish. Drag the top handle, or focus it and use arrow keys. New notes inherit the active category and selected color.
