System Update Notification Alert Dialog

Component 27

About

An alert dialog that notifies users about an available system update, showing the release version badge and "Update Now" / "Remind Me Later" actions.

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

Code

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

Usage.tsx

import { ShieldAlertIcon } from "lucide-react";
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/v-alert-dialog-8-utils/alert-dialog";
import { Badge } from "@/components/ui/v-alert-dialog-8-utils/badge";
import { Button } from "@/components/ui/v-alert-dialog-8-utils/button";

export default function Default() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center p-6">
      <AlertDialog defaultOpen>
        <AlertDialogTrigger
          render={<Button variant="outline">System Update</Button>}
        />
        <AlertDialogContent className="gap-0 p-0 sm:max-w-md">
          <div className="mx-auto flex flex-col items-center justify-center gap-2 p-6">
            <div className="flex size-12 items-center justify-center rounded-full bg-info/10 text-info dark:bg-info/20">
              <ShieldAlertIcon className="size-6" />
            </div>
            <AlertDialogTitle className="text-center">
              System Update Available!
            </AlertDialogTitle>
            <Badge variant="success">Release v28.1.0 (2026-01-12)</Badge>
          </div>

          <div className="flex flex-col items-center justify-center gap-4 rounded-b-2xl bg-muted/60 pt-5">
            <AlertDialogDescription className="px-6 text-center text-muted-foreground">
              A new version of the application is ready. Restarting now will
              apply the latest security patches and features.
            </AlertDialogDescription>
            <AlertDialogFooter className="flex w-full gap-4 sm:items-center sm:justify-center">
              <AlertDialogClose render={<Button variant="ghost" />}>
                Remind Me Later
              </AlertDialogClose>
              <AlertDialogClose render={<Button />}>
                Update Now
              </AlertDialogClose>
            </AlertDialogFooter>
          </div>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}