What's New Dialog

A release-notes dialog on Base UI that pages through what changed. Each slide has a picture, a tag, a title and a few lines. Slides move the way you go, by Back and Next, the dots, arrow keys or a swipe, and the text keeps the tallest slide's height so the buttons never jump. Next becomes Got it on the last slide, with the full changelog and Don't show again below. Also exports WhatsNewBadge.

Tags: whats-new changelog release-notes announcement onboarding dialog slides modal
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

slides*
WhatsNewSlide[]
version
string
Shown as a chip over the media, e.g. "4.2".
date
string
Release date as you want it shown, e.g. "Oct 28".
heading
string
Default "What's new"
The dialog's name, read out on open and shown beside the version.
open
boolean
defaultOpen
boolean
Default false
onOpenChange
(open: boolean) => void
trigger
React.ReactElement
The element that opens the dialog, e.g. a WhatsNewBadge.
changelogHref
string
Adds "Full changelog" to the footer.
onDontShowAgainChange
(dontShowAgain: boolean) => void
Shows a "Don't show again" checkbox. Store the answer and skip opening next time.
onFinish
() => void
Called when someone reaches the last slide and presses Got it.
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Where the dialog portals to. Pass a positioned element to keep it inside a frame.
className
string

Props
			Description
slides*	WhatsNewSlide[]	–
version	string	–	Shown as a chip over the media, e.g. "4.2".
date	string	–	Release date as you want it shown, e.g. "Oct 28".
heading	string	"What's new"	The dialog's name, read out on open and shown beside the version.
open	boolean	–
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	–
trigger	React.ReactElement	–	The element that opens the dialog, e.g. a `WhatsNewBadge`.
changelogHref	string	–	Adds "Full changelog" to the footer.
onDontShowAgainChange	(dontShowAgain: boolean) => void	–	Shows a "Don't show again" checkbox. Store the answer and skip opening next time.
onFinish	() => void	–	Called when someone reaches the last slide and presses Got it.
container	HTMLElement \| React.RefObject<HTMLElement \| null> \| null	–	Where the dialog portals to. Pass a positioned element to keep it inside a frame.
className	string	–