Question 1

What is a shadcn hover card?

Accepted Answer

A shadcn hover card is the rich preview popover that appears when you hover over a link or mention — Twitter user previews, GitHub repo cards, Notion mention popovers, Wikipedia link previews. It's built on Radix UI's HoverCard primitive (open-on-hover with configurable delay, ARIA-popup semantics, mouse-leave dismiss) wrapped in shadcn/ui's HoverCard styling. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these hover card examples free?

Accepted Answer

Yes, every hover card example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Hover card vs Tooltip vs Popover — what's the difference?

Accepted Answer

Tooltip is small text-only label revealed on hover ("Save", "Settings"). HoverCard is rich content revealed on hover — image, title, description, action button. Popover is rich content revealed on CLICK — when you need to show structured content but the user must opt in. Pick by content density (text → tooltip, rich → hover card / popover) and trigger gesture (hover → tooltip / hover card, click → popover).

Question 4

When should I AVOID hover cards?

Accepted Answer

Touch devices — there's no hover, so the card never opens. If your users are mobile-heavy, render the rich content on tap (Popover) instead, or as part of the link's destination page. Also avoid hover cards for critical content ("hover to see the price") — users miss them if they don't know to hover. Use them as a NICE-TO-HAVE preview, not as the only path to information.

Question 5

How do I build a Twitter-style user preview?

Accepted Answer

Use the profile variant. Hover over a username link → card opens with avatar, display name, handle, follower count, bio, and Follow button. Pre-fetch the user's data on hover-with-delay (Radix's `openDelay` prop, default 700ms — give users a moment to commit to the hover before firing the network request). Cache the data per user ID so subsequent hovers are instant.

Question 6

How do I show a link preview card (like Notion or Slack)?

Accepted Answer

Use the preview variant. The card shows the linked page's title, description, and OpenGraph image. Build the preview server-side: fetch the URL's HTML, parse the OG meta tags (`og:title`, `og:description`, `og:image`), cache the result. The HoverCard renders the cached preview — instant, no per-hover network. For external links, also include the domain so users see where they'd land.

Question 7

How do I tune the open / close delay?

Accepted Answer

Pass `openDelay={700}` and `closeDelay={300}` to HoverCard. Default open delay is 700ms — long enough that users don't trigger cards by accidental cursor pass-through. Close delay is shorter (300ms) so cards dismiss responsively. For super-deliberate previews (long-form mention popovers), bump open to 1000ms; for quick avatar previews where users want fast feedback, drop to 400ms.

Question 8

How do I install a hover card example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/hover-card/…`, plus the shadcn/ui HoverCard primitive (and its Radix dependency) if you don't already have them.

Question 9

How do I make hover cards work on touch devices?

Accepted Answer

They don't — there's no hover gesture on touch. Two patterns: (1) Conditionally render HoverCard on desktop and Popover (click-to-open) on touch via a `useMediaQuery('(hover: hover)')` check. (2) Use HoverCard everywhere, but ensure the linked page itself contains the same information so touch users get it via navigation. Don't pretend hover works on touch — tap-to-toggle behavior on a hover-card primitive is an accessibility footgun.

Question 10

How do I prefetch data for the hover card without firing requests on every hover?

Accepted Answer

Subscribe to the `onOpenChange` event and fetch when `next === true`. Cache per ID via SWR / TanStack Query (the hook deduplicates concurrent requests automatically). For super-aggressive prefetch, listen for `mouseenter` on the trigger (fires before the openDelay) and start the fetch — the data is usually ready by the time the card opens. Use `<link rel="prefetch">` for navigation prefetch, separate from data prefetch.

Question 11

Which libraries do hover card examples depend on?

Accepted Answer

Radix UI HoverCard (the primitive — hover detection, configurable delays, collision-aware positioning), shadcn/ui HoverCard (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside card content). For data-fetching examples, SWR or TanStack Query for caching. React 19 baseline.

Question 12

Are hover card examples accessible for keyboard and screen reader users?

Accepted Answer

Partially. Radix HoverCard opens on focus too (Tab to the trigger → card opens), so keyboard users get the same preview experience. Screen readers announce the card content when it opens. The catch: the card is supplementary — its content should also be available without the card (linked-page title in the link text, profile data in the user's profile page). Treat the card as an enhancement, not the only path.

Question 13

Can I use these hover card examples with React Server Components?

Accepted Answer

The HoverCard is a client component (it manages open state and hover events). Wrap it inside a Server Component parent and pass static content. For server-fetched preview data, fetch on the server when possible (link preview cards, OG image lookups) and pass the data as props. For per-user-on-hover data (mention popovers), fetch on the client via SWR / TanStack Query with caching.

React Hover Card Examples for shadcn/ui

Browse every hover card example

Frequently Asked Questions