Preview Card

Overlay

A rich preview that opens on hover over an anchor.

Preview cards are like hover cards with richer content, often a thumbnail or avatar. Built on Base UI's dedicated Preview Card primitive.

npx shadcn@latest add preview-card

Avatar preview

Hover an avatar to see a larger card with details.

Preview

Live

tsx

1<PreviewCard>
2  <PreviewCardTrigger className="overflow-hidden rounded-full">
3    <img src="https://i.pravatar.cc/64?img=12" alt="Ada" className="size-12 rounded-full" />
4  </PreviewCardTrigger>
5  <PreviewCardContent>
6    <div className="flex items-start gap-3">
7      <Avatar>
8        <AvatarImage src="https://i.pravatar.cc/64?img=12" alt="Ada" />
9        <AvatarFallback>AL</AvatarFallback>
10      </Avatar>
11      <p className="text-sm font-semibold">Ada Lovelace</p>
12    </div>
13  </PreviewCardContent>
14</PreviewCard>

Delays

Preview cards have longer default delays than hover cards.

Preview

Live

tsx

1<PreviewCard>
2  <PreviewCardTrigger delay={400} closeDelay={150}>
3    ...
4  </PreviewCardTrigger>
5  <PreviewCardContent>...</PreviewCardContent>
6</PreviewCard>

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= 600	Milliseconds to wait before opening on hover.
closeDelay	number= 300	Grace period before closing when leaving the trigger.
open	boolean= false	Controlled open state.
sideOffset	number= 8	Distance between trigger and card.