Skip to content

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

Success with Next Steps Alert Dialog for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not create the project.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

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

Usage

<AlertDialog>
    <AlertDialogTrigger asChild={props => <Button {...props()}>Complete Action</Button>} />
    <AlertDialogContent>
      <AlertDialogHeader>
        <div class="flex items-center gap-2">
          <CircleCheckIcon aria-hidden="true" class="size-5 text-success" />
          <AlertDialogTitle>Project Created Successfully</AlertDialogTitle>
        </div>
        <AlertDialogDescription>
          Your project has been created. Here&apos

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.

API Reference

Alert Dialog

Sets asChild and props. The rest is on the Alert Dialog page.

Button

Sets props. The rest is on the Button page.