Shadcn Hover Card: Rich Link Previews on Hover for React
The shadcn hover card reveals a rich preview when a pointer rests on a trigger, letting sighted users peek at what sits behind a link without navigating to it. Think of the profile card that appears when you hover a username on GitHub or Twitter: that pattern, built on Radix UI and styled with Tailwind CSS, is exactly what this react hover card component delivers.
This page collects hover card examples you can copy and paste, including a basic preview card, a variant with an avatar and profile details, and one with stats and action buttons. Each example is a typed TypeScript component that works in Next.js and Vite projects alike.
Good moments for a hover card
Hover cards fit wherever a name or reference deserves more context than the text can carry: user mentions in comments, assignees in a task list, repository links, customers in an orders table, or linked documents. The preview saves a navigation for users who only need a quick look.
Since hovering requires a pointer, the card never appears on touch devices, and that is by design. Treat it strictly as progressive enhancement: the trigger must remain a working link, and everything in the card must also exist on the destination page.
Design guidelines
- Keep triggers meaningful: Attach hover cards to entities like people, projects, or documents, not to arbitrary words or decorative elements.
- Tune the open delay: A brief opening delay prevents cards from flashing while the pointer travels across the page.
- Cap the content: An avatar, a name, one line of description, and a stat row is plenty. Anything more belongs on the page itself.
- Never hide unique actions: Buttons inside the card are shortcuts. Touch and keyboard users must have another path to the same actions.
- Load previews lazily: Fetch remote preview data when the card opens rather than for every trigger on the page.
Why it beats a plain tooltip here
- Holds rich content: Avatars, stats, and buttons are all valid children, where a tooltip is limited to a short text label.
- Stays open for interaction: Moving the pointer into the card keeps it open, so links and buttons inside are actually clickable.
- Smart positioning: The card flips and shifts near viewport edges automatically, with an optional arrow pointing at the trigger.
- Zero layout cost: Content renders in a portal above the page, so previews never push surrounding text around.
Pairing with other components
The profile variants on this page combine an avatar with name, bio, and a follow button, and a badge works well for roles or status inside the card. In admin tools, hover cards attached to user cells in a table give quick context without leaving the list view.
When the same preview must be reachable on touch and keyboard, wrap the content in a popover instead, since it opens on click. For single-word hints, stay with a tooltip.
Primitive support
The component builds on the Radix UI Hover Card primitive, which manages hover intent with configurable openDelay and closeDelay, pointer-safe transitions between trigger and content, and collision-aware positioning. Setup instructions live in the shadcn hover card docs.
The primitive is intentionally pointer-only, which keeps its semantics honest: it is a preview for mouse users, not a disclosure widget. Projects that need click-based or touch-accessible behavior should reach for the popover primitive instead.