Env Vars Editor
Forms
Source and install need .
pnpm dlx shadcn@latest add @assembli/unsaved-changes-barUnsaved Changes Bar
A floating bar for settings pages and editors. It rises when a form is dirty, counts the changed fields, saves with ⌘S, shows a spinner, an error that keeps the changes, or Saved before it sinks away. Bump attention when someone tries to leave and it shakes and flashes; it also asks before a reload or close. Ships useFormDraft for draft-versus-saved form state.
Props
Other props pass through to the root element.
dirty*
boolean
Show the bar. It stays up through saving and a short "Saved" after this turns false.
onSave*
() => void | Promise<unknown>
Return a promise to show a spinner; a rejection shows the error and keeps the changes.
onDiscard*
() => void
changes
number
How many fields changed, for "3 unsaved changes".
message
React.ReactNode
saveLabel
string
Default
"Save changes"discardLabel
string
Default
"Discard"attention
number
Default
0Bump this to nudge the bar, e.g. when someone tries to leave the page with changes.
strategy
"fixed" | "absolute"
Default
"fixed"fixedfloats over the viewport;absolutesits at the bottom of the nearest positioned parent.warnOnLeave
boolean
Default
trueAsk the browser to confirm before the tab closes or reloads while dirty.
shortcut
boolean
Default
trueSave with ⌘S / Ctrl+S anywhere on the page while dirty.
| Description | |||
|---|---|---|---|
| dirty* | boolean | – | Show the bar. It stays up through saving and a short "Saved" after this turns false. |
| onSave* | () => void | Promise<unknown> | – | Return a promise to show a spinner; a rejection shows the error and keeps the changes. |
| onDiscard* | () => void | – | |
| changes | number | – | How many fields changed, for "3 unsaved changes". |
| message | React.ReactNode | – | |
| saveLabel | string | "Save changes" | |
| discardLabel | string | "Discard" | |
| attention | number | 0 | Bump this to nudge the bar, e.g. when someone tries to leave the page with changes. |
| strategy | "fixed" | "absolute" | "fixed" |
|
| warnOnLeave | boolean | true | Ask the browser to confirm before the tab closes or reloads while dirty. |
| shortcut | boolean | true | Save with ⌘S / Ctrl+S anywhere on the page while dirty. |
