StickyNote
react-fancyWhy
A dashboard, whiteboard, or design canvas needs quick note-taking surfaces that look and feel like paper — but inline divs demand custom styling, don't share colors or shadows across the app, and leave positioning/dragging logic scattered. Without a primitive, every canvas re-invents paper styling and loses the ability for agents to read/write notes via stable handles.
What
StickyNote is a controlled text component with five preset paper colors (yellow, blue, green, pink, violet) plus custom CSS color support, optional contentEditable text editing, a selected prop for a blue focus ring, and rotation/sizing knobs. The id prop doubles as a stable handle for agent bridges. Child content overrides the editable text layer when needed.How
Import from
@particle-academy/react-fancy, bind <StickyNote value={text} onChange={setText} color="yellow" editable selected={isSelected} />, and let your layout (board, artboard, or consumer) own positioning and dragging. Agents can read/write the value via the stable id without DOM guessing.