Shadcn Alert Dialog Components

Shadcn Alert Dialog Component

The Shadcn Alert Dialog is a modal window that interrupts the user with an important message and waits for an answer. It is the standard way to confirm destructive or irreversible actions such as deleting an account, discarding unsaved changes or cancelling a subscription, where a single accidental click would be costly.

From a plain Cancel and Continue confirmation to a terms dialog that unlocks its accept button only after scrolling, the examples here cover both sides of modal UI: destructive confirmations and full dialogs for sign in, checkout, plan changes and onboarding. The shadcn alert dialog examples sit on the Radix UI Alert Dialog primitive, which has an equivalent in Base UI, and all of them are styled with shadcn/ui, React and Tailwind CSS.

What is the Shadcn Alert Dialog Component?

An alert dialog is a special kind of modal with role="alertdialog". Unlike a regular dialog, it does not close when the user clicks the overlay: the user has to pick one of the actions, usually Cancel or Continue, or press Escape. When it opens, focus moves to the Cancel button, so pressing Enter by accident never confirms a destructive action.

Use an alert dialog only when you need an explicit decision. For information that does not block the user, show an inline Alert or a Sonner Toast. For forms and longer content that can be dismissed freely, a regular dialog is the right choice, and many of the variants on this page, such as sign in, checkout and edit profile, are built with the shadcn/ui Dialog component for exactly that reason. On mobile, a Drawer can replace the modal entirely.

Anatomy of the Shadcn Alert Dialog

16 Shadcn Alert Dialog Variants

Each alert dialog variant listed here is previewed live at the top of this page, together with its source code and install command.

• Confirmation: The classic Cancel and Continue alert dialog, plus a controlled Delete Item dialog with a destructive trigger and confirm button.
• With icon: An alert dialog with a circled warning icon next to the title and description for account deletion.
• Scrollable content: Dialogs with long content using the native scrollbar, a custom Scroll Area, a sticky header or a sticky footer.
• Terms and conditions: A scrollable terms dialog that keeps the accept button disabled until the user has scrolled to the end.
• Newsletter and feedback: Short dialogs with an email subscription field or a feedback textarea and a single submit button.
• Sign in and OTP code: A sign in dialog with email, password, remember me and Google login, and a one time code dialog with separate digit slots.
• Plans and checkout: A change plan dialog with radio cards and feature lists, and a checkout dialog with billing options, card details and a coupon field.
• Edit profile and onboarding: A profile editor with cover image, avatar upload and form fields, and a multi step onboarding dialog with progress dots.

How to Install the Shadcn Alert Dialog Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a alert dialog variant by its name:

npx shadcn@latest add @shadcnuikit/alert-dialog1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Alert Dialog Component

Wrap a trigger and the content in AlertDialog, describe the consequence in the title and description, and put the two choices in AlertDialogFooter. Run your action from the onClick of AlertDialogAction.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export function DeleteProject({ onDelete }: { onDelete: () => void }) {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete project</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently removes the project and all of its files.
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive" onClick={onDelete}>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Why Use the Shadcn Alert Dialog Component

• Prevents costly mistakes: A required decision stops users from deleting or losing data with a single click.
• Safe default focus: Focus lands on Cancel when the dialog opens, so an accidental Enter press does nothing harmful.
• Accessible modal behavior: Focus trapping, scroll locking, the alertdialog role and ARIA labelling come from the primitive.
• Button variants built in: Action and Cancel reuse the Button variants, so a destructive confirm button needs only one prop.
• Responsive layout: The header and footer adapt from stacked on mobile to aligned rows on desktop without extra code.

Common Alert Dialog Use Cases

• Deleting data: Confirm before removing projects, files, users or accounts.
• Unsaved changes: Warn users before they leave a form or editor and lose their work.
• Billing changes: Confirm cancelling a subscription, downgrading a plan or making a payment.
• Session and security: Ask before signing out of all devices or revoking an API key.
• Bulk actions: Confirm actions that affect many rows selected in a table at once.

Customizing the Shadcn Alert Dialog

Use size="sm" on AlertDialogContent for a compact dialog with two equal buttons, add an icon with AlertDialogMedia, and change the confirm button with the variant prop on AlertDialogAction. Width, radius and padding are regular Tailwind CSS classes on the content, and colors come from your theme variables. The free Theme Generator can create a matching palette.

To keep the dialog open while an async action runs, control it with open and onOpenChange and close it yourself when the request finishes:

const [open, setOpen] = useState(false)

async function handleDelete() {
  await deleteProject()
  setOpen(false)
}

<AlertDialog open={open} onOpenChange={setOpen}>
  ...
  <Button variant="destructive" onClick={handleDelete}>
    Delete
  </Button>
</AlertDialog>

Alert Dialog Accessibility and Keyboard Support

The alert dialog follows the WAI-ARIA alert dialog pattern. The content has role="alertdialog", is labelled by AlertDialogTitle and described by AlertDialogDescription, and both are required for screen readers to announce the message correctly. Focus is trapped inside the dialog while it is open and returns to the trigger when it closes.

Write button labels that describe the result, such as Delete project instead of OK, so users can decide without reading the description again.

Alert Dialog Best Practices

• Reserve alert dialogs for destructive or irreversible actions; too many confirmations teach users to click through them.
• Phrase the title as a clear question, such as Delete this project?
• Explain exactly what will be lost in the description.
• Use variant="destructive" on the confirm button for delete and remove actions.
• Keep the dialog open and show a loading state while the action is running, then close it.
• For non blocking feedback after the action, show a Sonner Toast.

Components Related to Alert Dialog

Shadcn Alert Dialog FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.