Components
Loading preview...
Pixel-art popover from 8bitcn.com — retro pixel border on floating panel. Wraps Radix Popover (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-popover"use client";
import {
Popover, PopoverTrigger, PopoverContent,
Button, Input, Label,
} from "@/components/ui/8bit-popover";
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">
<Popover>
<PopoverTrigger asChild>
<Button>Open Stats</Button>
</PopoverTrigger>
<PopoverContent className="w-72 px-5">
<div className="grid gap-3">
<div className="space-y-1">
<h4 className="text-xs uppercase tracking-widest">Hero Stats</h4>
<p className="text-[10px] text-muted-foreground">Adjust your loadout.</p>
</div>
<div className="grid gap-2">
<Label htmlFor="hp">HP</Label>
<Input id="hp" defaultValue="100" />
</div>
</div>
</PopoverContent>
</Popover>
</div>
);
}