Skip to content

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.json

Preview

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.json

GitHub 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.json

Usage

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.

PropTypeDefault
openboolean—
onOpenChange(open: boolean) => void—

Notes

  • `AlertDialogTitle` is required for accessibility.