8-bit Drawer

Buttons 10

About

Pixel-art drawer from 8bitcn.com — retro pixel border on bottom-sheet panel. Wraps Vaul Drawer (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 Drawer to your project and fits it to your theme.

Code

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

Usage.tsx

"use client";
import {
  Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle,
  DrawerDescription, DrawerFooter, DrawerClose, Button,
} from "@/components/ui/8bit-drawer";

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">
      <Drawer>
        <DrawerTrigger asChild>
          <Button>Open Inventory</Button>
        </DrawerTrigger>
        <DrawerContent>
          <div className="mx-auto w-full max-w-sm">
            <DrawerHeader>
              <DrawerTitle>Inventory</DrawerTitle>
              <DrawerDescription>Manage your hero loadout.</DrawerDescription>
            </DrawerHeader>
            <div className="px-4 pb-2 text-[10px] uppercase tracking-widest text-muted-foreground">
              3 items / 20 slots
            </div>
            <DrawerFooter>
              <Button>Save</Button>
              <DrawerClose asChild>
                <Button variant="outline">Close</Button>
              </DrawerClose>
            </DrawerFooter>
          </div>
        </DrawerContent>
      </Drawer>
    </div>
  );
}