shadcn.io is not affiliated with official shadcn/ui
Update Available Notification Block for Ark UI
A desktop app's update card at the top end of its window: highlights, one Update now button that runs a simulated download with a real progress bar, then Restart to finish, and Later with a Remind me choice.
Installation
Overview
Offer an update without taking over the screen, with this update available card for React with Ark UI. It's Bumpwick, a desktop project app, drawn in greys inside a hairline frame with a plus mark on each corner: a title bar, a side column and a list of projects, with the card at the stage's top end. The card says "Bumpwick 4.8.0 is ready" with three highlights and one primary, a Shine Button. Update now starts a download you start and that ends by itself: a real Progress runs to 35, 70 and 100 percent over three timeouts, then the same button reads Restart to finish and pressing it says "Updated to 4.8.0 (demo)". Cancel stops a download, and Later opens a native Remind me choice (tomorrow, next week, after the next release) that writes the reminder as a sentence with a date derived from the page's fixed "now". The card keeps its size in every state. It's built from Progress, Shine Button, Native Select, Button and Guides, with CSS motion only. For desktop apps, editors and any product that updates itself.
FAQ
Is anything downloaded or installed?
No. The run is three setTimeouts that you start by pressing Update now (about a second apart, cleared on Cancel and when the block leaves the page); the Progress value is the step it has reached, and the "Downloading 48 MB" line is typed. Restart to finish only says it is done. In your app, drive the Progress from your updater's real events and call its restart from the button.
Why is there one button that changes?
So the primary is always in the same place: Update now, then Downloading (quiet and refused while it runs), then Restart to finish, then Up to date (quiet again). The label changes inside a fixed minimum width so the card never reflows. The quiet states keep focus and say why they wait in the status line, since a disabled button would drop focus.
What does Later do?
It opens a labelled Remind me choice in the card's info slot, in the same space as the download line, so nothing moves. Choosing writes "We'll remind you on Thu 15 Oct, 09:00 (demo)" from AS_OF plus the number of days in REMINDERS, or "after the next release" when it isn't a date, and returns focus to Later. Nothing is scheduled in this demo; in your app, save the moment and show the card again then. While a download runs, the same button reads Cancel, and when the update is done it reads Replay.
How is the progress bar named?
translations={{ value: () => label }} ("Downloading Bumpwick 4.8.0") and its value from the step.The percentage beside it is the visible number and doesn't speak at every step; the status line announces the start, the cancel and the end.Is it accessible?
The card is a named section with a heading, the highlights are a list, every control is a real button or a labelled select, and one polite status line says what each press did. The card is not timed and not modal: it never takes focus, and the drawn app under it is hidden from assistive technology. The quiet buttons use the page's own text colour at full opacity so they stay readable.