Hover Card

Overlay

A compact preview card that appears on hover.

Hover cards reveal contextual information without a click. The trigger opens on hover after a short delay and stays open while you move to the card.

npx shadcn@latest add hover-card

Profile preview

Hover the handle to preview a profile.

Preview

Live

tsx

1<HoverCard>
2  <HoverCardTrigger>@janedoe</HoverCardTrigger>
3  <HoverCardContent className="w-80">
4    <div className="flex items-start gap-3">
5      <Avatar>
6        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="@janedoe" />
7        <AvatarFallback>JD</AvatarFallback>
8      </Avatar>
9      <p className="text-sm font-semibold">Jane Doe</p>
10    </div>
11  </HoverCardContent>
12</HoverCard>

Delays

Customize the open delay and the grace period before closing.

Preview

Live

tsx

1<HoverCard>
2  <HoverCardTrigger delay={500} closeDelay={200}>@janedoe</HoverCardTrigger>
3  <HoverCardContent>...</HoverCardContent>
4</HoverCard>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
delay	number= 300	Milliseconds to wait before opening on hover.
closeDelay	number= 150	Grace period before the card closes when leaving the trigger.
open	boolean= false	Controlled open state.
sideOffset	number= 8	Distance between trigger and card.