Personal note
Note Button
A portable note primitive with a geometric desktop expansion, adaptive mobile sheet, line-wrap gutter, and private local persistence.
Dependencies
gsap@gsap/reactlucide-react
Interaction
The panel expands from the trigger’s live position without scaling its border or typography. On mobile it becomes a bottom sheet that follows the visual viewport when the software keyboard opens.
Props
| Prop | Type | Description |
|---|---|---|
| storageKey | string | Local storage key used to persist note text. |
| open | boolean | Controls whether the note panel is open. |
| onOpenChange | (open: boolean) => void | Called when the panel open state changes. |
| defaultOpen | boolean | Initial open state for uncontrolled usage. |
| value | string | Controlled note text. |
| onValueChange | (value: string) => void | Called when note text changes. |
| placement | "auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | Expansion quadrant on desktop. |
| width | number | Target desktop panel width in pixels. |
| height | number | Target desktop panel height in pixels. |
| breakpoint | number | Viewport width below which the panel becomes a sheet. |
| showLineNumbers | boolean | Displays measured line numbers next to the editor. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.