Unsaved Changes Alert Dialog

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Unsaved Changes Alert Dialog to your project and fits it to your theme.

Code

How Unsaved Changes Alert Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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&apos;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>
  );
}