8-bit Context Menu

Cards 2

About

Pixel-art right-click context menu from 8bitcn.com — retro pixel border. Wraps Radix ContextMenu (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 Context Menu to your project and fits it to your theme.

Code

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

Usage.tsx

"use client";
import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuLabel,
  ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut,
  Card, CardHeader, CardTitle, CardContent,
} from "@/components/ui/8bit-context-menu";
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">
      <ContextMenu>
        <ContextMenuTrigger asChild>
          <Card className="w-72 cursor-pointer">
            <CardHeader>
              <CardTitle className="text-xs">Right-click me</CardTitle>
            </CardHeader>
            <CardContent className="text-[10px] text-muted-foreground">
              Hero item card — opens a context menu on right-click.
            </CardContent>
          </Card>
        </ContextMenuTrigger>
        <ContextMenuContent className="w-52">
          <ContextMenuLabel>Item</ContextMenuLabel>
          <ContextMenuSeparator />
          <ContextMenuItem>Equip<ContextMenuShortcut>E</ContextMenuShortcut></ContextMenuItem>
          <ContextMenuItem>Use<ContextMenuShortcut>U</ContextMenuShortcut></ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuItem>Drop<ContextMenuShortcut>X</ContextMenuShortcut></ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  );
}