Hover Card

A preview that appears when someone points at a link, so they can peek before they go.

Reviewed by yesterday.

Hover or focus the name to preview the profile.

Fig. 1 Point at the name to preview the profile. Keyboard focus opens it too.

When to use it

Use Hover Card to preview what’s behind a link: a person, a page, a repository. Everything in it must also be reachable by following the link.

Don’t put actions people need inside it; it disappears as soon as the pointer leaves.

Tooltip

Names a control.

Press to try the action.

Icon buttons and unlabeled controls.

Hover CardThis page

A peek at a link.

Reviewed by yesterday.

Hover or focus the name to preview the profile.

Previews of people and pages.

Popover

The page stays usable.

Press Esc or click outside to close.

Small changes next to their button.

Fig. 2 Three ways to show more on demand. Point at or focus each one.

How it behaves

Base UI opens it after a short delay when the trigger is hovered or focused, and closes it when the pointer and focus leave. HoverCardTrigger renders a link; use render to style it, such as render={<Button variant="link" />}.

The content is supplementary. Put anything essential on the page or behind the link itself, because touch and keyboard users may never open the card.

HoverCardContent accepts side, align, and offsets, and matches Popover: overlay surface, a 150ms scale and fade from the trigger, immediate when opened from the keyboard.

Use Tooltip for a short label on an icon and Popover for content people interact with.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

hover-card-example.tsx

The full source is yours to edit once installed:

hover-card.tsx

1"use client"2 3import { mergeClassName } from "@/registry/lib/utils"4import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"5 6function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {7  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />8}9 10function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {11  return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />12}13 14// Matches Popover's surface and motion. It opens after a hover delay, so keyboard focus skips the scale.15function HoverCardContent({16  className,17  side = "bottom",18  sideOffset = 4,19  align = "center",20  alignOffset = 4,21  ...props22}:23  & PreviewCardPrimitive.Popup.Props24  & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">)25{26  return (27    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">28      <PreviewCardPrimitive.Positioner29        align={align}30        alignOffset={alignOffset}31        side={side}32        sideOffset={sideOffset}33        className="isolate z-50 outline-none"34      >35        <PreviewCardPrimitive.Popup36          data-slot="hover-card-content"37          className={mergeClassName(38            "z-50 w-64 max-w-(--available-width) origin-(--transform-origin) rounded-lg bg-popover p-3 body-sm text-popover-foreground shadow-(--shadow-overlay) outline-none transition-[opacity,scale] duration-150 ease-(--ease-out) data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-100 motion-reduce:transition-opacity [:root:has(:focus-visible)_&]:transition-none motion-safe:data-starting-style:scale-97 motion-safe:data-ending-style:scale-97",39            className40          )}41          {...props}42        />43      </PreviewCardPrimitive.Positioner>44    </PreviewCardPrimitive.Portal>45  )46}47 48export { HoverCard, HoverCardContent, HoverCardTrigger }49