Overlays

Hover card

A preview of what a link leads to, on hover. Base UI's PreviewCard.

packages/design-system/components/ui/hover-card.tsx

Examples

@builtwell

A link with a preview. Hover it

Anatomy

01Trigger, an anchor
02Popup, w-72, rounded-3xl

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@repo/design-system/components/ui/hover-card";

<HoverCard>
  <HoverCardTrigger href="/about">@builtwell</HoverCardTrigger>
  <HoverCardContent>A design studio for brands, websites and products.</HoverCardContent>
</HoverCard>

Props

Prop	Type	Default	Description
HoverCardTrigger href	string	none	The trigger is an anchor, so it still works as a link.
HoverCardTrigger delay / closeDelay	number	none	Milliseconds before opening and closing.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	none	Which side of the trigger the popup opens on.
align	"start" \| "center" \| "end"	"center"	How the popup lines up with the trigger along that side.
sideOffset	number	4	The gap between trigger and popup, in pixels.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Use it for a nice-to-have preview.

Don't

Hide the only way to reach something inside it.