Overlays and menus
Hover Card
A hover and focus preview surface with Base UI positioning and dismissal.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/hover-card.jsonUsage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
<HoverCard>
<HoverCardTrigger>Hover me</HoverCardTrigger>
<HoverCardContent>Preview content</HoverCardContent>
</HoverCard>API
Main exports: HoverCard, HoverCardTrigger, HoverCardContent, HoverCardSkeleton
A rich preview panel shown from hover or keyboard focus, with a built-in loading placeholder and custom loading-content support.