Components
Loading preview...
A React alert dialog component built with Tailwind CSS. Show confirmation modals for actions like delete or logout with accessible dialogs, focus control, and keyboard support.
npx shadcn@latest add https://21st.dev/r/tailgrids/tailgrids-alert-dialog"use client";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
buttonStyles,
} from "@/components/ui/tailgrids-alert-dialog";
export default function DefaultDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-white p-8 dark:bg-gray-950">
<AlertDialog>
<AlertDialogTrigger className={buttonStyles()}>Open Alert Dialog</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}
export { DefaultDemo };