An alert dialog that warns users about unsaved form changes before they navigate away, with a "don't ask again" checkbox and stay/discard actions.
import { CardSimIcon } from "lucide-react";
import {
AlertDialog,
AlertDialogClose,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogTitle,
} from "@/components/ui/v-alert-dialog-6-utils/alert-dialog";
import { Button } from "@/components/ui/v-alert-dialog-6-utils/button";
import { Checkbox } from "@/components/ui/v-alert-dialog-6-utils/checkbox";
import {
Frame,
FramePanel,
} from "@/components/ui/v-alert-dialog-6-utils/frame";
import { Label } from "@/components/ui/v-alert-dialog-6-utils/label";
export default function Default() {
return (
<div className="flex min-h-[480px] w-full items-center justify-center p-8">
<AlertDialog defaultOpen>
<div className="w-full max-w-md overflow-hidden rounded-2xl border bg-popover text-popover-foreground shadow-lg ring-0">
<Frame className="p-px">
<FramePanel className="p-0">
<div className="flex items-start gap-3 p-4">
<div className="flex size-10 shrink-0 items-center justify-center rounded-full border border-amber-100 bg-amber-50 text-amber-500 dark:bg-amber-950 dark:text-amber-300">
<CardSimIcon className="size-5" />
</div>
<div className="flex flex-col justify-center gap-1">
<AlertDialogTitle className="font-semibold text-sm">
Unsaved changes
</AlertDialogTitle>
<AlertDialogDescription className="text-muted-foreground text-sm">
You have unsaved changes in this form. If you leave now,
your progress will be lost.
</AlertDialogDescription>
</div>
</div>
<AlertDialogFooter className="mt-2 items-center gap-4 sm:justify-between">
<div className="flex items-center gap-2">
<Checkbox id="dont-ask-again" />
<Label
className="font-normal text-muted-foreground"
htmlFor="dont-ask-again"
>
Don't ask again
</Label>
</div>
<div className="flex items-center gap-2">
<Button variant="ghost">Stay</Button>
<Button>Discard Changes</Button>
</div>
</AlertDialogFooter>
</FramePanel>
</Frame>
</div>
</AlertDialog>
</div>
);
}
Part of Cnippet — browse the full library on 21st.dev.