Alert Dialog
Modal dialog for confirming destructive or important actions. Install Alert Dialog from the VLLNT UI registry with the shadcn CLI.
Modal dialog for confirming destructive or important actions. Part of the overlay family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Alert Dialog to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/alert-dialog.jsonSource
"use client";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { cn } from "../../lib/utils";
import { buttonVariants } from "../button/button";
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>;
}) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
ref={ref}
/>
);
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Content>>;
}) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className,
)}
ref={ref}
{...props}
/>
</AlertDialogPortal>
);
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
{...props}
/>
);
AlertDialogHeader.displayName = "AlertDialogHeader";
const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className,
)}
{...props}
/>
);
AlertDialogFooter.displayName = "AlertDialogFooter";
const AlertDialogTitle = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Title>>;
}) => (
<AlertDialogPrimitive.Title
className={cn("text-lg font-semibold", className)}
ref={ref}
{...props}
/>
);
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Description>>;
}) => (
<AlertDialogPrimitive.Description
className={cn("text-sm text-muted-foreground", className)}
ref={ref}
{...props}
/>
);
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Action>>;
}) => (
<AlertDialogPrimitive.Action
className={cn(buttonVariants(), className)}
ref={ref}
{...props}
/>
);
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>;
}) => (
<AlertDialogPrimitive.Cancel
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className,
)}
ref={ref}
{...props}
/>
);
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
};
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.