Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Information with Highlighted Content Alert Dialog for React

A what's-new dialog that lists Dark Mode, performance, and integrations as three muted cards, from a sparkles button.

The trigger says What's New. The title is New in Version 2.0. Three cards name Dark Mode, Improved Performance, and New Integrations. Awesome does not navigate.

Use cards when each item needs a title and a line. A one-line list can stay plain. A longer changelog fits a Dialog. In React, Base UI does not record that they read it.

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

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    <SparklesIcon aria-hidden="true" data-icon="inline-start" />
    What&apos;s New
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>New in Version 2.0</AlertDialogTitle>
      <AlertDialogDescription>
        Check out the latest features and improvements:
      </AlertDialogDescription>
    </AlertDialogHeader>
    <div className="flex flex-col gap-2">
      {features.map((feature) => (
        <div
          className="rounded-lg border bg-muted/50 p-3"
          key={feature.title}
        >
          <div className="font-medium text-sm">{feature.title}</div>
          <p className="text-muted-foreground text-xs">
            {feature.description}
          </p>
        </div>
      ))}
    </div>
    <AlertDialogFooter>
      <AlertDialogAction>Awesome!</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples