Components
Alert Dialog
Frosted confirm dialog — the AlertDialog counterpart of the acrylic Dialog.
A confirm dialog with the same 20px frosted overlay and translucent panel as the Dialog. It shares the dialog's ref-counted body-paint, so it can stack on top of a Dialog without either one losing its frost.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/alert-dialog.jsonUsage
"use client"import { Button, buttonVariants } from "@/registry/acrylic/button"import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel,} from "@/registry/acrylic/alert-dialog"export default function AlertDialogDemo() { return ( <AlertDialog> <AlertDialogTrigger asChild> <Button variant="destructive">Open Alert Dialog</Button> </AlertDialogTrigger> <AlertDialogContent className="sm:max-w-[380px]"> <AlertDialogHeader> <AlertDialogTitle>Delete item?</AlertDialogTitle> <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction className={buttonVariants({ variant: "destructive", size: "large" })}> Delete </AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> )}Notes
- Panel uses the macOS 26 alert metrics — 26px corner radius over the frosted overlay.
AlertDialogAction/AlertDialogCancelreuse the acrylic Button (viabuttonVariants) at the kit'slargesize (28px): Action →default, Cancel →neutral.- For a destructive action, pass
className={buttonVariants({ variant: "destructive", size: "large" })}. - Like Dialog, the panel is a grid whose children carry
min-w-0: a long unbreakable string inside (atruncated path/URL, a<pre>) would otherwise push the grid track pastmax-w-lgand stretch the whole panel. Overflow stays inside the child, sotruncate/overflow-x-autoon your content works as written.