Components
Loading preview...
Pixel-art dialog from 8bitcn.com — retro pixel border on modal panel. Wraps Radix Dialog (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-dialog"use client";
import {
Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
Button, Input, Label,
} from "@/components/ui/8bit-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">
<Dialog>
<DialogTrigger asChild>
<Button>Edit Hero</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md px-6">
<DialogHeader className="px-0">
<DialogTitle>Edit Profile</DialogTitle>
<DialogDescription>Rename your hero and save.</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="name">Hero Name</Label>
<Input id="name" defaultValue="Player One" />
</div>
</div>
<DialogFooter className="px-0">
<Button>Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}