Forms
Navigation & layout
Data display & feedback
Date & time
Browse components
← All components
Alert Dialog
Confirmation dialog with cancel and action buttons.
Install
npx shadcn@latest add https://ui.anuragroy.dev/r/alert-dialog.jsonPreview
Loading preview…
Installation
Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.
Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/alert-dialog.jsonGitHub fallback if the website is down:
Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/alert-dialog.jsonUsage
Import paths follow your components.json aliases. After install, the default path is @/components/ui/alert-dialog.
Import
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger} from "@/components/ui/alert-dialog"example.tsx
import { Button } from "@/components/ui/button"import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger,} from "@/components/ui/alert-dialog"export function Example() { return ( <AlertDialog> <AlertDialogTrigger render={<Button variant="destructive" />}> Delete item </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Continue</AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> )}API Reference
AlertDialog
Base UI AlertDialog root.
| Prop | Type | Default |
|---|---|---|
| open | boolean | — |
| onOpenChange | (open: boolean) => void | — |
Notes
- `AlertDialogTitle` is required for accessibility.