Alert Dialog

A modal that interrupts to confirm a destructive action.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

render(
  <AlertDialog>
    <AlertDialogTrigger asChild><Button variant="destructive">Delete account</Button></AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>This permanently deletes your account and all data.</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel asChild><Button variant="ghost">Cancel</Button></AlertDialogCancel>
        <AlertDialogAction asChild><Button variant="destructive">Delete</Button></AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/alert-dialog

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import AlertDialog from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.