Hover Card
A preview card that opens on hover or focus, for showing detail about a link or reference without navigating.
Install
pnpm dlx shadcn@latest add @namche/hover-cardUsage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card';
<HoverCard>
<HoverCardTrigger render={<Button variant="link">Tenzing Norgay</Button>} />
<HoverCardContent>
<p className="font-heading text-sm font-medium">Tenzing Norgay</p>
<p className="text-xs text-muted-foreground">On-call engineer · Sirdar</p>
</HoverCardContent>
</HoverCard>Built on Base UI's PreviewCard primitive rather than HoverCard — the
exported names (HoverCard, HoverCardTrigger, HoverCardContent) match
shadcn convention, but the open delay and hover-intent handling underneath
come from PreviewCard. HoverCardContent defaults to side="bottom" and
align="center", at a fixed w-64.