OverlaysAnimated
Hover Card
Preview cards for links and mentions, opened on hover.
A hover card previews what is behind a link (a profile, a repository, a page) when sighted mouse users hover it. It opens after a short delay and springs from the link.
Preview
Designed by @cuelark and the community.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/hover-card.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/hover-card.
Builds on: motion
Usage
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
<HoverCard>
<HoverCardTrigger asChild><a href="#profile">@ada</a></HoverCardTrigger>
<HoverCardContent>…</HoverCardContent>
</HoverCard>Motion
How it moves
Springs from its anchor side (popIn).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
HoverCard
| Prop | Type | Default | Description |
|---|---|---|---|
| openDelay | number | 250 | ms before opening. |
| closeDelay | number | 150 | ms before closing. |
HoverCardTrigger · HoverCardContent
Accessibility
- Hover cards are ignored by screen readers and keyboard-only users; never hide essential content in them.
- The trigger should be a normal link that works on its own.
FAQ
Also searched as: react hover card · link preview · user profile popover · shadcn hover card