Docs › Components › Hover Card

Shadcn Hover Card

The shadcn/ui Hover Card shows a rich preview when the user hovers a link or name, styled with Tailwind CSS v4. Built on accessible primitives, it opens on hover and focus and renders in a portal. Hover cards preview profiles and details across ShadcnStore blocks.

Key features

• Rich, optionally interactive preview on hover and focus.
• Configurable open and close delay.
• Renders in a portal so it is never clipped.
• Positions and flips to stay in view.

Installation

npx shadcn@latest add hover-card

Usage

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

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>@shadcn</HoverCardTrigger>
      <HoverCardContent>The React framework preview.</HoverCardContent>
    </HoverCard>
  )
}

Accessibility

• The card opens on focus as well as hover, so keyboard users can reach it.
• Do not put essential or only-here content in a hover card; it is hover-based.
• Keep the preview concise and let the trigger remain a real link.

When to use the Hover Card

Use a Hover Card to preview linked content without navigating: a user profile, a repository, or a page summary. For a short label, use a Tooltip. For click-triggered interactive content, use a Popover.

Used in these blocks

• Teams: member profile previews.
• Testimonials: author previews.
• App shells: user previews.

Related components

For short labels use a Tooltip; for click interactions use a Popover. Hover cards often preview an Avatar and name.

FAQ

What is the shadcn hover card used for?

The Hover Card shows a rich preview when the user hovers a link or name, such as a user profile or a page summary.

What is the difference between Hover Card and Tooltip?

Hover Card shows richer, sometimes interactive content on hover. Tooltip is for a short, non-interactive text label.

Do hover cards work on touch?

No. They are hover-based and unreliable on touch, so never hide essential content in them.

How do I change the open delay?

Set openDelay and closeDelay on the HoverCard root.