8-bit Dialog

Forms 2

About

Pixel-art dialog from 8bitcn.com — retro pixel border on modal panel. Wraps Radix Dialog (inlined via esbuild).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8-bit Dialog to your project and fits it to your theme.

Code

How 8-bit Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}