An alert dialog that notifies users about an available system update, showing the release version badge and "Update Now" / "Remind Me Later" actions.
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>
);
}
Part of Cnippet — browse the full library on 21st.dev.