Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA snackbar that says a new version is ready with Reload and Later buttons, that does not time out because the choice matters, and that is announced once. Use this when a service worker has downloaded a new version and the person decides when to reload.
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.
Use it when a service worker has downloaded a new version and the person decides when to reload.
Do not use it for transient confirmations (use the undo bar) or forced reloads that lose work.
It composes button, which the CLI installs for you.
import { UpdateAvailableSnackbar } from "@/components/update-available-snackbar"<div className="flex flex-col items-center gap-3">
<Button variant="outline" onClick={() => setOpen(true)}>
Simulate a new version
</Button>
<p role="status" className="text-sm">
App: {log}
</p>
<UpdateAvailableSnackbar
open={open}
onReload={() => {
setLog("reloaded to v2")
setOpen(false)
}}
onLater={() => {
setLog("update postponed")
setOpen(false)
}}
/>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | required | Whether the update is waiting. |
onReload | () => void | required | Apply the update. |
onLater | () => void | required | Keep the old version for now. |
status region (not an alert) so the announcement does not interrupt; it has no timer, because both choices matter and reading takes time.The pattern ships with a Testing Library test (update-available-snackbar.test.tsx) that drives it through roles and the keyboard.