Component

Sticky Note

A draggable colored note for whiteboard and canvas surfaces. Supports six soft-tint colors, editable text, author attribution, and absolute positioning for use in free-form board layouts.

Colors

Six built-in color palettes, each with a soft background tint and a readable dark text. Use nextStickyColor from the headless core to cycle through them automatically.

Yellow

Pink

Blue

Green

Purple

Orange

Editable

Provide onTextChange to render an editable textarea inside the note. Combine with author to show a footer chip.

Alice

Positioned on a board

Pass x and y to absolutely position notes on a canvas. Add draggable + onMove to enable drag-to-reposition.

Design the layout

Review with team

Ship it!

Drag notes to reposition them.

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { StickyNote } from '@refraction-ui/react'

export function MyBoard() {
  const [text, setText] = React.useState('Ideas here…')

  return (
    <StickyNote
      color="yellow"
      text={text}
      onTextChange={setText}
      author="Alice"
    />
  )
}

Props

PropTypeDefaultDescription
color'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange''yellow'Color palette for the sticky note background and text.
textstring--Text content of the note. When combined with onTextChange, renders an editable textarea.
onTextChange(value: string) => void--Called when the text changes. Providing this prop makes the note editable.
authorstring--Optional author name shown in the note footer as a chip.
xnumber--Absolute x position in pixels. Used with y for board/canvas placement.
ynumber--Absolute y position in pixels. Used with x for board/canvas placement.
draggablebooleanfalseWhether the note can be dragged. Requires onMove to receive position updates.
onMove(position: { x: number; y: number }) => void--Called with the new position after a drag operation completes.
classNamestring--Additional CSS classes to apply.