Alert Dialog

An animated and accessible Alert Dialog component used to get confirmation from the user.

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/alert-dialog

Usage

1import {
2  AlertDialog,
3  AlertDialogContent,
4  AlertDialogHeader,
5  AlertDialogTitle,
6  AlertDialogDescription,
7  AlertDialogFooter,
8  AlertDialogCancel,
9  AlertDialogAction,
10} from "@/components/ui/alert-dialog";
11
12<AlertDialog>
13  <AlertDialogContent>
14    <AlertDialogHeader>
15      <AlertDialogTitle>Warning</AlertDialogTitle>
16      <AlertDialogDescription>Are you sure you want to perform this action?</AlertDialogDescription>
17    </AlertDialogHeader>
18    <AlertDialogFooter>
19      <AlertDialogCancel>Cancel</AlertDialogCancel>
20      <AlertDialogAction>Continue</AlertDialogAction>
21    </AlertDialogFooter>
22  </AlertDialogContent>
23</AlertDialog>

Props

Prop	Type	Description	Default
open	boolean	Whether the dialog is open	false
onOpenChange	(open: boolean) => void	Callback when open/close state changes	-
children	React.ReactNode	Dialog content	-