Skip to content

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

Free

Success with Next Steps Alert Dialog for React

A project-created dialog with a check icon and three numbered next steps, from inviting people to creating a task.

The title says the project was created. The list is invite the team, set configuration, then create a task. Continue does not open any step. No project was created.

List a few next steps when success would otherwise dead-end. Real work belongs on the next page, not in the dialog. A longer flow fits a Dialog. In React, Base UI does not create the project.

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 />}>Complete Action</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div className="flex items-center gap-2">
        <CircleCheckIcon aria-hidden="true" className="size-5 text-success" />
        <AlertDialogTitle>Project Created Successfully</AlertDialogTitle>
      </div>
      <AlertDialogDescription>
        Your project has been created. Here&apos;s what you can do next:
      </AlertDialogDescription>
    </AlertDialogHeader>
    <ol className="ms-5 flex list-decimal flex-col gap-2 text-sm marker:text-muted-foreground">
      {steps.map((step) => (
        <li key={step}>{step}</li>
      ))}
    </ol>
    <AlertDialogFooter>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

How many steps?

Three to five, each something people can do in a few minutes.

In what order?

The natural workflow: invite people, configure, then do the first task.

Numbered or bulleted?

Numbered when order matters, as here; bullets for independent suggestions.

How is the list built?

An ol with list-decimal and marker:text-muted-foreground, mapped from a static array at module scope.

How specific should each step be?

Concrete actions with verbs: Invite team members, Create your first task. Not Explore features.

Does Continue 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

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

All 39 alert dialog examples