Actions & overlays@neumorphism-ui/alert-dialog

Alert Dialog

An explicit confirmation for an irreversible action. Place Cancel first. For asynchronous work, close a controlled dialog only after success.

@neumorphism-ui/alert-dialog

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/alert-dialog

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/alert-dialog

Import

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog";

Example

export default function Example() {
  const [message, setMessage] = React.useState("");
  return (<div className="grid gap-3"><AlertDialog><AlertDialogTrigger render={<Button variant="destructive" />}>{"Delete draft"}</AlertDialogTrigger><AlertDialogContent><AlertDialogTitle>{"Delete this draft?"}</AlertDialogTitle><AlertDialogDescription>{"This cannot be undone. Confirm explicitly to continue."}</AlertDialogDescription><AlertDialogFooter><AlertDialogCancel>{"Go back"}</AlertDialogCancel><AlertDialogAction onClick={() => setMessage("Draft deleted.")}>{"Delete draft"}</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog><p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p></div>);
}

API Reference

Component	Prop	Type	Default	Description
`AlertDialog`	`open / defaultOpen`	`boolean`	`—`	Set controlled or initial state.
`AlertDialogContent`	`initialFocus`	`boolean \| React.RefObject \| function`	`—`	Choose the focus target when opening.
`AlertDialogAction`	`onClick`	`React.MouseEventHandler`	`—`	Handle a synchronous confirmation; use controlled state for asynchronous work.