Floating Panel Notes Pad

ProNew

A scratch notes panel that floats over the page, saves its text to local storage as you type, shows Saved or Saving status and survives closing and reopening.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

storageKey

open

delay1

Guide and examples

When to use it

Use this when people need to jot something down while reading or working elsewhere on the page.

Do not use it when notes must sync across devices (save to the server and show the sync state).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`storageKey`	`string`	required	-
`open`	`boolean`	required	-
`onOpenChange`	`(open: boolean) => void`	required	-
`delay`	`number`	optional	Debounce before saving, in ms. Default 400.

Accessibility

The panel is a non-modal dialog; the textarea is labelled Notes.
Saving, Saved and Could not save are written in a status region.
Closing the panel never discards the text.

Testing

The pattern ships with a Testing Library test (floating-panel-notes-pad.test.tsx) that covers loading, the debounced save with status, persistence across close and the blocked-storage message.

Guide and examples

When to use it

Use this when people need to jot something down while reading or working elsewhere on the page.

Do not use it when notes must sync across devices (save to the server and show the sync state).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`storageKey`	`string`	required	-
`open`	`boolean`	required	-
`onOpenChange`	`(open: boolean) => void`	required	-
`delay`	`number`	optional	Debounce before saving, in ms. Default 400.

Accessibility

The panel is a non-modal dialog; the textarea is labelled Notes.
Saving, Saved and Could not save are written in a status region.
Closing the panel never discards the text.

Testing

The pattern ships with a Testing Library test (floating-panel-notes-pad.test.tsx) that covers loading, the debounced save with status, persistence across close and the blocked-storage message.