Layout UI

Hover Card

Rich preview card that appears on hover. Built on Base UI PreviewCard. Use for user profiles, repository previews, and link context. Dismissed when the pointer leaves.

Preview

Design system by A@alexjohnson. Hover to see profile.

Installation

bash
npx shadcn@latest add @layout/hover-card

Usage

tsx
import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card"

Examples

Repository card

See the layout-ui repository for source code.

Guidelines for AI agents

Use to show a rich preview of a linked resource — user profile, repository, document, or URL — when the pointer rests on a trigger link. Content is read-only; for interactive controls use Popover. Trigger should be a link or button with meaningful text so the hover card supplements rather than replaces accessible copy.

Never

  • Neverput interactive controls (forms, buttons) inside HoverCardContent — use Popover
  • Neveruse HoverCard for single-line labels — use Tooltip
  • Neverrely on HoverCard for touch-only users; it requires hover; pair with an accessible tap alternative
  • Neveruse HoverCard for confirmation or blocking UI — use Dialog or AlertDialog

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-md--layout-radius--layout-duration-base