Sticky notes for any React app

Install

Needs a shadcn project with Tailwind v4 and React 19. Add the whole board, and everything it uses comes with it:

npx shadcn@latest add https://stickies.live/r/sticky-board.json

Or add the namespace to components.json once, and use short names:

{
  "registries": {
    "@stickies": "https://stickies.live/r/{name}.json"
  }
}

npx shadcn@latest add @stickies/sticky-note @stickies/use-sticky-notes

Sticky board

A canvas of notes. Drag a note by its top, resize from the corner, drag the background to look around, double-click to add a note. Click to select, ⇧-click for more, ⌘A for all. ⌘C, ⌘X and ⌘V copy, cut and paste in the Stickies format, and Delete removes. It fills its parent and saves to localStorage by default.

npx shadcn@latest add https://stickies.live/r/sticky-board.json

import { StickyBoard, useStickyBoard } from "@/components/sticky-board"
import { createNote } from "@/lib/stickies-format"

const notes = [createNote({ text: "Hello", x: 0, y: 0 })]

function Toolbar() {
  const { selectedNotes, copy, reset } = useStickyBoard()
  return <button onClick={() => copy(selectedNotes)}>Copy</button>
}

export function Board() {
  return (
    <div className="h-[600px]">
      <StickyBoard defaultNotes={notes} storageKey="my-board" source={{ app: "My app" }}>
        <Toolbar />
      </StickyBoard>
    </div>
  )
}

Sticky note

The note on its own, in parts. Leave any out: without StickyNoteResize it doesn't resize, without StickyNoteColors it keeps its colour. With positioned={false} it sits in a list or grid like any block.

npx shadcn@latest add https://stickies.live/r/sticky-note.json

<StickyNote note={note} onNoteChange={setNote} onDelete={remove}>
  <StickyNoteHeader>
    <StickyNoteColors />
    <span className="flex-1" />
    <StickyNoteState />
    <StickyNoteClose />
  </StickyNoteHeader>
  <StickyNoteText />
  <StickyNoteFooter>
    <StickyNoteAuthor />
    <StickyNoteDate />
  </StickyNoteFooter>
  <StickyNoteResize />
</StickyNote>

useStickyNotes

The board's state without the board: add, update, remove, raise, select, reset. Saved to localStorage unless you pass persist: false or control the notes yourself. The array's order is the stack.

npx shadcn@latest add https://stickies.live/r/use-sticky-notes.json

const { notes, ready, add, update, remove, raise, selected, select, reset } =
  useStickyNotes({ defaultNotes, storageKey: "my-board" })

add({ text: "New", x: 40, y: 40 })
update(id, { state: "done" })          // sets updatedAt
update(id, { x: 100 }, { touch: false }) // geometry only

useStickiesClipboard

⌘C, ⌘X and ⌘V in the Stickies format. Copying writes the Stickies JSON, HTML that carries the document, and plain text, so notes paste into docs and email as coloured boxes and into Stickies apps whole. Pasting reads the richest version there. Typing in a field is left alone.

npx shadcn@latest add https://stickies.live/r/use-stickies-clipboard.json

const { copy } = useStickiesClipboard({
  getNotes: () => selectedNotes,
  onPaste: ({ notes }) => insert(placeNotes(notes, { x: 40, y: 40 })),
  onCut: (notes) => remove(notes.map((n) => n.id)),
  source: { app: "My app" },
})

// From a button: HTML and plain text only, as browsers allow
await copy(selectedNotes)

Safari removes custom clipboard types between sites, so the HTML's data-stickies is what carries notes there. See §8.5 of the spec for what each browser allows.

usePointerDrag

Moving or resizing anything with the pointer, captured so it carries on outside the element, and divided by the zoom.

npx shadcn@latest add https://stickies.live/r/use-pointer-drag.json

const start = useRef(position)
const { handlers, dragging } = usePointerDrag({
  onDragStart: () => { start.current = position },
  onDrag: ({ dx, dy }) => setPosition({ x: start.current.x + dx, y: start.current.y + dy }),
})
return <div {...handlers} />

useCanvasPan

Dragging a surface to look around it. Only presses on the surface itself pan, so what's on it keeps its own dragging.

npx shadcn@latest add https://stickies.live/r/use-canvas-pan.json

const { pan, handlers, toCanvas } = useCanvasPan()
return (
  <div {...handlers} className="relative h-full overflow-hidden">
    <div style={{ transform: `translate(${pan.x}px, ${pan.y}px)` }}>{children}</div>
  </div>
)

useListFormatting

Lists in a plain textarea, as in Apple's Notes: "- " starts a bullet, Return carries the list on, and Return on an empty item ends it. Numbered lists keep counting.

npx shadcn@latest add https://stickies.live/r/use-list-formatting.json

const list = useListFormatting(text, setText)
return <textarea {...list} />

Stickies format

The spec in TypeScript, with no dependencies. Everything else here uses it.

npx shadcn@latest add https://stickies.live/r/stickies-format.json

Theme

The six colours as variables on [data-sticky-color], light and dark (shadcn's .dark), the sticky-paper, sticky-header, sticky-edge, sticky-ink and sticky-meta colours for Tailwind, and the sticky-shadow utility. Change the variables in your CSS to change the palette.

npx shadcn@latest add https://stickies.live/r/stickies-theme.json

<div data-sticky-color="blue" className="bg-sticky-paper text-sticky-ink sticky-shadow" />

For agents

llms.txt sums up the format. The Stickies skill lets an agent make notes, check them, and put them on the clipboard in every format, ready to paste onto a board like this one.