Components
Loading preview...
Pixel-art confirmation alert dialog from 8bitcn.com — retro pixel border on modal. Wraps Radix AlertDialog (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-alert-dialog"use client";
import {
AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
AlertDialogTitle, AlertDialogDescription, AlertDialogFooter,
AlertDialogCancel, AlertDialogAction, Button,
} from "@/components/ui/8bit-alert-dialog";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden font-pixel">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">Delete Save</Button>
</AlertDialogTrigger>
<AlertDialogContent className="bg-card text-card-foreground px-6">
<AlertDialogHeader className="px-0">
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This permanently deletes your save file.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="px-0">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}