Hover card

Preview a person or link on hover or focus without leaving the page.

previewpeoplepopover

Preview

Live · keyboard ready

When to use

Previews of people behind mentions, avatars, or author names.
Link or reference previews where the click must stay free for navigation.
Dense lists where moving between triggers should open cards almost instantly.

When not to use

Use tooltip for a plain text label.
Use popover when the content has buttons or inputs.
Use user-menu for the account menu on your own avatar.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:ui",
  "title": "Hover card",
  "description": "Preview a person or link on hover or focus without leaving the page.",
  "categories": [
    "disclosure"
  ],
  "dependencies": [
    "@radix-ui/react-popover",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/hover-card/hover-card.tsx",
      "type": "registry:component",
      "target": "@components/manicat/hover-card/hover-card.tsx"
    },
    {
      "path": "registry/components/hover-card/hover-card.module.css",
      "type": "registry:component",
      "target": "@components/manicat/hover-card/hover-card.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/hover-card",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/hover-card",
    "markdown": "https://uiarc.dev/components/hover-card/markdown",
    "tags": [
      "preview",
      "people",
      "popover"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

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

export function HoverCardExample() {
  return (
    <HoverCard
      content={
        <HoverCardProfile
          name="Elia Kuratli"
          role="Design engineering"
          bio="Builds Manicat UI, and writes the motion presets behind it."
          stats={[{ label: "Components", value: "106" }, { label: "Blocks", value: "22" }]}
          meta="Berlin"
        />
      }
    >
      <button className="rounded-[var(--radius-control)] border border-(color:--border) px-3 py-2 text-sm">@elia</button>
    </HoverCard>
  );
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Mention preview Hover a handle to preview the person without leaving the page.

Live · keyboard ready

mention-preview-hover-a-handle-to-preview-the-person-without-leaving-the-page-.tsxtsx

"use client";

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

export function HoverCardProfileExample() {
  return (
    <HoverCard
      content={
        <HoverCardProfile
          name="Ada Lovelace"
          role="Engineering"
          bio="Writes the analytics pipeline and the motion presets behind it."
          stats={[{ label: "Components", value: "106" }, { label: "Blocks", value: "22" }]}
          meta="London"
        />
      }
    >
      <button className="rounded-[var(--radius-control)] border border-(color:--border) px-3 py-2 text-sm">@ada</button>
    </HoverCard>
  );
}

Keyboard interactions

Keys	Action
Tab	Keyboard focus on the trigger opens the card immediately.
Enter	Opens the card without the hover delay.
Escape	Closes the card and keeps it closed while the pointer rests on the trigger.

Accessibility

The card has role="tooltip" and the trigger gets aria-describedby while it is open.
Focus never moves into the card, so keep its content read only.
On touch, a tap toggles the card instead of relying on hover.

Motion

Grows from the trigger edge: scale from 0.96 and a 4px offset on a smooth spring, with a separate fade. Mid-exit returns retarget instead of jumping.
Within 300ms of another card, the next opens after 80ms with a fade only. Profile rows settle in with a small stagger.
Reduced motion drops scale and travel and keeps a short fade.

Responsive behavior

The card is 18.5rem wide, capped at the space Radix reports as available or the viewport minus 24px.
On touch, a tap toggles the card instead of waiting for hover.
Long names and roles ellipsize and stats wrap onto new lines.

Performance

Only one hover card is open on the page, and it mounts in a portal only while open.
Open and close use timers, not pointer tracking loops; the profile avatar decodes async.

Notes for AI

Use for previews of people, links, or references where the click must stay free for navigation. Use tooltip for plain labels and popover for interactive content.
Only one hover card is open at a time on the page. Anything actionable belongs behind the trigger itself.