Hover Card · paneui

Reviewed by @mira

Installation

pnpm dlx shadcn@latest add @paneui/hover-card

Usage

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

<HoverCard>
  <HoverCardTrigger href="/people/mira">@mira</HoverCardTrigger>
  <HoverCardContent>…</HoverCardContent>
</HoverCard>

Composition

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Examples

Sides

When to use

For a glance at a linked thing (a person, a repo, an issue) before following the link. Content must be optional: touch users never see it, so never put actions only here.

API Reference

Built on the Preview Card primitive. Only the props this library adds or changes are listed; everything else passes through.

Re-export of the primitive root. Also accepts every prop of PreviewCard.Root.

HoverCardTrigger

A link by default. Also accepts every prop of PreviewCard.Trigger.

delay= 500: number; ms before opening.
closeDelay= 200: number; ms before closing.
variant= "link": "link" | "plain"; plain drops the link styling when render passes a Button.

Prop	Type	Default	Description
delay	number	500	ms before opening.
closeDelay	number	200	ms before closing.
variant	"link" \| "plain"	"link"	`plain` drops the link styling when `render` passes a Button.

HoverCardContent

Also accepts every prop of PreviewCard.Popup.

side= "bottom": "top" | "right" | "bottom" | "left"
align= "center": "start" | "center" | "end"
sideOffset= 8: number

Prop	Type	Default
side	"top" \| "right" \| "bottom" \| "left"	"bottom"
align	"start" \| "center" \| "end"	"center"
sideOffset	number	8