Components
Loading preview...
Pixel-art hover card from 8bitcn.com — preview popover with chunky pixel border revealed on hover.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/8bit-hover-card"use client";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/8bit-hover-card";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<HoverCard>
<HoverCardTrigger>
<button className="px-4 py-2 bg-primary text-primary-foreground font-pixel border-2 border-foreground">
@hero
</button>
</HoverCardTrigger>
<HoverCardContent side="bottom" className="font-pixel">
<div className="text-sm space-y-2">
<div className="font-bold">Hero ⚔</div>
<div className="text-xs text-muted-foreground">Level 42 Warrior</div>
<div className="text-xs">HP 120 / 120 — MP 30 / 30</div>
</div>
</HoverCardContent>
</HoverCard>
</div>
);
}