Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Informational

Information with Highlighted Content Alert Dialog for React

An informational dialog that lists new features in highlighted cards.

Framework
UI library

A release deserves better than a bulleted list. This React alert dialog presents three new features as muted cards with a title and a line each, opened from a What's New button with a sparkles icon. It's shadcn.io's Alert Dialog on Base UI.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Cards or a bulleted list?

Cards for three to five major features that deserve attention. A list for many small changes or bug fixes.

How much text goes in a card?

A two-to-four-word title and a short line. Link to the changelog for the rest.

How are the cards styled?

rounded-lg border bg-muted/50 p-3, with the title in font-medium text-sm and the line in text-muted-foreground text-xs. They're built from a static array at module scope.

How many cards should I show?

Three to five. Pick what matters most and link to the full list.

Why does the trigger have an icon?

The sparkles icon signals something new and positive. It's aria-hidden and marked data-icon="inline-start" so the button spaces it.

Does Awesome! close the dialog?

Yes. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.

All 39 alert dialog examples