Pixel-art right-click context menu from 8bitcn.com — retro pixel border. Wraps Radix ContextMenu (inlined via esbuild).
"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>
);
}
Part of 8bitcn — browse the full library on 21st.dev.