React Dialog Block Unsaved Changes

Unsaved changes dialog with change summary, save/discard options, and navigation blocking confirmation

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Prevent accidental data loss with change warnings. This React unsaved changes dialog provides a clear warning when users attempt to leave with unsaved work, displays a summary of pending changes, offers save and discard options, and integrates with navigation blocking. Built with shadcn/ui AlertDialog, Button, and Badge components using Tailwind CSS, users make informed decisions about their unsaved work. See changes, choose action, proceed safely—perfect for form editors, document tools, settings pages, or any Next.js application where protecting user work from accidental loss improves the editing experience.

"use client";

import { useState } from "react";
import { AlertTriangle, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

type Change = {
  field: string;
  type: "modified" | "added" | "removed";
};

const sampleChanges: Change[] = [
  { field: "Title", type: "modified" },
  { field: "Description", type: "modified" },
  { field: "Category", type: "modified" },
  { field: "Tags", type: "added" },
  { field: "Cover Image", type: "added" },
];

export const title = "React Dialog Block Unsaved Changes";

export default function DialogUnsavedChanges() {
  const [open, setOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [changes] = useState<Change[]>(sampleChanges);

  const handleSaveAndLeave = async () => {
    setIsSaving(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setIsSaving(false);
    setOpen(false);
  };

  const handleDiscard = () => {
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <AlertTriangle className="mr-2 h-4 w-4" />
            Leave Page
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent style={{ maxWidth: "384px" }}>
        <DialogHeader>
          <DialogTitle>Unsaved Changes</DialogTitle>
          <DialogDescription>
            You have unsaved changes that will be lost if you leave.
          </DialogDescription>
        </DialogHeader>

        <div className="py-4">
          <p className="text-sm text-muted-foreground mb-2">
            {changes.length} pending changes:
          </p>
          <div className="flex flex-wrap gap-1.5">
            {changes.map((change, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {change.field}
              </Badge>
            ))}
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button
            variant="outline"
            onClick={handleDiscard}
            disabled={isSaving}
          >
            Discard
          </Button>
          <Button onClick={handleSaveAndLeave} disabled={isSaving}>
            {isSaving ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Saving...
              </>
            ) : (
              "Save & Leave"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { AlertTriangle, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";type Change = {  field: string;  type: "modified" | "added" | "removed";};const sampleChanges: Change[] = [  { field: "Title", type: "modified" },  { field: "Description", type: "modified" },  { field: "Category", type: "modified" },  { field: "Tags", type: "added" },  { field: "Cover Image", type: "added" },];export const title = "React Dialog Block Unsaved Changes";export default function DialogUnsavedChanges() {  const [open, setOpen] = useState(false);  const [isSaving, setIsSaving] = useState(false);  const [changes] = useState<Change[]>(sampleChanges);  const handleSaveAndLeave = async () => {    setIsSaving(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsSaving(false);    setOpen(false);  };  const handleDiscard = () => {    setOpen(false);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <AlertTriangle className="mr-2 h-4 w-4" />            Leave Page          </Button>        </DialogTrigger>      </div>      <DialogContent style={{ maxWidth: "384px" }}>        <DialogHeader>          <DialogTitle>Unsaved Changes</DialogTitle>          <DialogDescription>            You have unsaved changes that will be lost if you leave.          </DialogDescription>        </DialogHeader>        <div className="py-4">          <p className="text-sm text-muted-foreground mb-2">            {changes.length} pending changes:          </p>          <div className="flex flex-wrap gap-1.5">            {changes.map((change, index) => (              <Badge key={index} variant="secondary" className="text-xs">                {change.field}              </Badge>            ))}          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button            variant="outline"            onClick={handleDiscard}            disabled={isSaving}          >            Discard          </Button>          <Button onClick={handleSaveAndLeave} disabled={isSaving}>            {isSaving ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Saving...              </>            ) : (              "Save & Leave"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-unsaved-changes.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-unsaved-changes.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-unsaved-changes.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-unsaved-changes.json

Pro block — Sign in to install

React Dialog Block Edit Record

Edit forms

React Dialog Block Warning

Warning messages

React Dialog Block Two Actions

Confirm or cancel

React Dialog Block Confirm Delete

Destructive actions

React Dialog Block Session Timeout

Session handling

React Dialog Block Success Confirmation

Save success

Questions you might have

"use client"; import { useState } from "react"; import { AlertTriangle, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; type Change = { field: string; type: "modified" | "added" | "removed"; }; const sampleChanges: Change[] = [ { field: "Title", type: "modified" }, { field: "Description", type: "modified" }, { field: "Category", type: "modified" }, { field: "Tags", type: "added" }, { field: "Cover Image", type: "added" }, ]; export const title = "React Dialog Block Unsaved Changes"; export default function DialogUnsavedChanges() { const [open, setOpen] = useState(false); const [isSaving, setIsSaving] = useState(false); const [changes] = useState<Change[]>(sampleChanges); const handleSaveAndLeave = async () => { setIsSaving(true); await new Promise((resolve) => setTimeout(resolve, 1000)); setIsSaving(false); setOpen(false); }; const handleDiscard = () => { setOpen(false); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <AlertTriangle className="mr-2 h-4 w-4" /> Leave Page </Button> </DialogTrigger> </div> <DialogContent style={{ maxWidth: "384px" }}> <DialogHeader> <DialogTitle>Unsaved Changes</DialogTitle> <DialogDescription> You have unsaved changes that will be lost if you leave. </DialogDescription> </DialogHeader> <div className="py-4"> <p className="text-sm text-muted-foreground mb-2"> {changes.length} pending changes: </p> <div className="flex flex-wrap gap-1.5"> {changes.map((change, index) => ( <Badge key={index} variant="secondary" className="text-xs"> {change.field} </Badge> ))} </div> </div> <DialogFooter> <Button variant="outline" onClick={() => setOpen(false)}> Cancel </Button> <Button variant="outline" onClick={handleDiscard} disabled={isSaving} > Discard </Button> <Button onClick={handleSaveAndLeave} disabled={isSaving}> {isSaving ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Saving... </> ) : ( "Save & Leave" )} </Button> </DialogFooter> </DialogContent> </Dialog> ); }

React Dialog Block Unsaved Changes

Installation

Related blocks you will also like

React Dialog Block Edit Record

React Dialog Block Warning

React Dialog Block Two Actions

React Dialog Block Confirm Delete

React Dialog Block Session Timeout

React Dialog Block Success Confirmation

Questions you might have

When should this dialog appear?

What changes should I track?

Should I show what changed?

How should save work from this dialog?

What happens on discard?

What does cancel do?