shadcn.io is not affiliated with official shadcn/ui

Success with Next Steps Alert Dialog for React

Q: How is the list built?

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

Q: 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.

A success dialog that lists numbered next steps after creating a project.

Success shouldn't be a dead end. This React alert dialog confirms a new project and lists three numbered next steps, so people know where to go. It's shadcn.io's Alert Dialog on Base UI with an ordered list under the header.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

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.

All 39 alert dialog examples

Preview