A release announcement told as stories: segmented bars fill and advance on their own, pause on hover or keyboard focus, and each update brings an animated illustration that slides in from the direction you move.
npx shadcn@latest add https://hyperblur.dev/r/popup-whats-new.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popup-whats-new.tsx.
import { PopupWhatsNew } from "@/components/hyperblur/popup-whats-new"
<PopupWhatsNew version="v4.2" onDone={(hide) => hide && localStorage.setItem("seen-4.2", "1")} />| Prop | Type | Default | Description |
|---|---|---|---|
| version | string | "v4.2" | Release label. |
| date | string | "Nov 6" | Release date as text. |
| items | PopupWhatsNewItem[] | Three updates | { title, body, tag?, art?, href? }. art is "previews", "command", "sync" or your own ReactNode. |
| interval | number | 6000 | Milliseconds each update stays before advancing. |
| autoPlay | boolean | true | Advance on a timer. When false the bars only mark progress. |
| onDone | (dontShowAgain: boolean) => void | Called by Got it with the checkbox state. | |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on the close button, Escape, the backdrop and the main actions. | |
| showTrigger | boolean | true | Render the built-in trigger button. Turn it off when you open the popup from your own code. |
| triggerLabel | string | "What's new" | Text of the built-in trigger button. |
| embedded | boolean | false | Render the panel in place instead of a fixed overlay: no backdrop, no scroll lock and no focus trap, for previews and docs. |
| accent | string | "#34d6b4" | Illustration, tag and link color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |