Hover card

When to use #

Use it for

Previewing a person, project or link without leaving the page.
Supplementary detail that is also available on its own page.

Skip it when

The information is essential; it is invisible on touch.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/hover-card.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from HoverCard and HoverCardProfile.

example.tsx

import { HoverCard, HoverCardProfile } from "@/components/ui/hover-card"

export function MentionCard() {
  return (
    <HoverCard content={<HoverCardProfile name="Mara Chen" role="Leads the copy" bio="Reviews the harbour room pages before they go to the stay team." stats={[{ label: "Projects", value: 4 }]} />}>
      <button type="button" className="text-sm font-medium underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-ring">@mara</button>
    </HoverCard>
  );
}

API reference #

HoverCardProfile

component

PropTypeDefault

name *string—

rolestring—

biostring—

statsreadonly { label: string; value: string | number; }[][]

It exposes tooltip semantics, with aria-describedby kept in step with state.

KeyBehaviour

EnterActivates the focused control.

EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.