Hover card

A preview card that appears when hovering or focusing a link, for people, issues or pull requests mentioned in text.

npx prodular-ui add hover-card

Person

Name, role and the two facts that matter right now.

Assigned to Priya Raman since Monday.

import { CalendarDaysIcon, MapPinIcon } from "lucide-react"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
export default function HoverCardProfile() {  return (    <p className="max-w-sm text-center text-sm text-muted-foreground">      Assigned to{" "}      <HoverCard>        <HoverCardTrigger          href="#"          className="font-medium text-foreground underline decoration-border-strong underline-offset-4 hover:decoration-foreground"        >          Priya Raman        </HoverCardTrigger>        <HoverCardContent className="w-80 text-left">          <div className="flex items-start gap-3">            <Avatar size="lg">              <AvatarFallback>PR</AvatarFallback>            </Avatar>            <div className="flex min-w-0 flex-1 flex-col gap-0.5">              <span className="text-sm font-semibold text-foreground">Priya Raman</span>              <span className="text-[13px] text-muted-foreground">Staff engineer, Platform</span>            </div>            <Button size="sm" variant="outline">              Message            </Button>          </div>          <div className="flex flex-col gap-1.5 border-t pt-3 text-[13px] text-muted-foreground">            <span className="flex items-center gap-2">              <MapPinIcon className="size-4" />              Lisbon, 14:32 local time            </span>            <span className="flex items-center gap-2">              <CalendarDaysIcon className="size-4" />              Out of office Oct 28 to Nov 1            </span>          </div>        </HoverCardContent>      </HoverCard>{" "}      since Monday.    </p>  )}

Linked record

A status badge and one line of metadata below a hairline.

Fixed in halcyon/relay#2841, shipping in 4.2.1.

import { GitPullRequestIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
export default function HoverCardLink() {  return (    <p className="max-w-sm text-center text-sm text-muted-foreground">      Fixed in{" "}      <HoverCard>        <HoverCardTrigger href="#" className="font-mono text-[13px] text-foreground underline decoration-border-strong underline-offset-4">          halcyon/relay#2841        </HoverCardTrigger>        <HoverCardContent side="top" className="text-left">          <div className="flex items-start gap-2.5">            <GitPullRequestIcon className="mt-0.5 size-4 shrink-0 text-success-subtle-foreground" />            <div className="flex flex-col gap-1">              <span className="text-sm leading-snug font-medium text-foreground">Retry webhooks with exponential backoff</span>              <span className="text-[13px] text-muted-foreground">Opened by Ana Sousa, 2 days ago</span>            </div>          </div>          <div className="flex items-center gap-2 border-t pt-3">            <Badge variant="success" size="sm">Merged</Badge>            <span className="text-xs text-muted-foreground tabular-nums">+212 −48 in 9 files</span>          </div>        </HoverCardContent>      </HoverCard>      , shipping in 4.2.1.    </p>  )}

Anatomy

<HoverCard>  <HoverCardTrigger href="/people/priya">Priya Raman</HoverCardTrigger>  <HoverCardContent>    {/* avatar, name, role */}  </HoverCardContent></HoverCard>

Guidance

Use it when

Use to preview a person, issue, pull request or document mentioned inline, so people do not have to open it.
Keep it to a title, a subtitle and two or three facts.

Avoid

Content people must interact with to finish a task. Hover cards do not open on touch.
Short labels for icon buttons. Use Tooltip.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

HoverCardTrigger renders a link. Give it a real href so it works without hover.
Never put the only copy of important information in a hover card.
Separate the header from details with border-t pt-3, not with a nested box.
Use side="top" when the trigger sits near the bottom of a scroll area.
For map markers, chart points and graph nodes, pass anchor={pointAnchor(x, y, container)} to HoverCardContent and control open, instead of hand-positioning a div with popover classes.

API

HoverCard

Prop	Type	Default	Description
delay / closeDelay	number	600 / 300	Milliseconds before opening and closing.

HoverCardContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side.
align	"start" \| "center" \| "end"	"center"	Alignment against the trigger.
anchor	Element \| VirtualAnchor \| RefObject		Positions against something other than the trigger: pointAnchor() for map markers, chart points and the pointer.
collisionPadding	number \| Padding	5	Space kept from the viewport edge.
sticky	boolean	false	Keeps the popup in view after the anchor scrolls away.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add hover-card# or, with the registry in components.jsonnpx shadcn@latest add @prodular/hover-card