Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Ideal for confirmations and destructive actions.

View Source

#Installation

npx @dinachi/cli@latest add alert-dialog

#Usage

tsx

import { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogHeader, AlertDialogFooter } from '@/components/ui/alert-dialog'

#Examples

Default Alert Dialog

A basic alert dialog for confirmations

Controlled Alert Dialog

Alert dialog with controlled open state

#API Reference

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the alert dialog
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes
children	React.ReactNode	—	The trigger element and dialog content