Shadcn Hover Card Components

Shadcn Hover Card Component

The Shadcn Hover Card shows a small preview card when users rest the pointer on a link, a user name or an avatar. It lets people peek at a profile, a repository or a linked page without leaving where they are, which is why social apps, project tools and documentation sites use it for mentions and inline references.

The profile and link previews on this page are built with shadcn/ui, React and Tailwind CSS. Each one works with both the Radix UI Hover Card primitive and the Base UI Preview Card. They cover the three common shapes of a hover preview: a mention card, a profile card with an avatar and a richer card with stats and actions, all with dark mode support and shadcn CLI installs.

What is the Shadcn Hover Card Component?

A hover card is a floating panel tied to a trigger. It opens after a short delay when the pointer enters the trigger or when the trigger receives keyboard focus, and it closes shortly after the pointer leaves both the trigger and the card, so users can move into the card and click the links or buttons inside it. The content is rendered in a portal and positioned with collision detection, so it stays on screen near edges.

Choose the component by how much content you need and how users open it. A Tooltip is for a short text label, such as the name of an icon button. A hover card is for a rich, optional preview. When the content is essential, interactive or must work on touch screens, use a Popover, which opens on click instead of hover.

Anatomy of the Shadcn Hover Card

3 Shadcn Hover Card Variants

Each hover card variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: A link style @handle trigger that reveals a title and a short description, the classic mention preview.
• With avatar: An avatar as the trigger and a profile card with a larger avatar, name, bio and a joined date with a calendar icon.
• With stats and actions: A View Profile button that opens a richer card with follower, following and project counts plus Follow and Message buttons.

How to Install the Shadcn Hover Card Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a hover card variant by its name:

npx shadcn@latest add @shadcnuikit/hover-card1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Hover Card Component

Import the three parts from your components/ui folder, wrap your link or avatar in HoverCardTrigger with asChild, and put the preview inside HoverCardContent.

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

export function UserMention() {
  return (
    <HoverCard openDelay={300} closeDelay={150}>
      <HoverCardTrigger asChild>
        <a href="/users/sarah" className="font-medium underline">
          @sarah
        </a>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex gap-3">
          <Avatar>
            <AvatarImage src="/avatars/sarah.png" alt="Sarah Chen" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <p className="text-sm font-semibold">Sarah Chen</p>
            <p className="text-muted-foreground text-sm">
              Design engineer. Building accessible UI.
            </p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Why Use the Shadcn Hover Card Component

• Context without navigation: Users preview a profile or link and stay on the current page.
• Smart positioning: The card flips and shifts to avoid screen edges, and exposes the side it opened on for directional animations.
• Forgiving timing: Open and close delays prevent flicker when the pointer passes over a trigger or moves into the card.
• Interactive content: Unlike a tooltip, the card can hold buttons and links that users can click.
• Fully styleable: The content accepts a className, and colors come from your popover tokens, so it follows your theme and dark mode.

Common Hover Card Use Cases

• User mentions: Preview a profile when hovering an @handle in comments, chats or feeds.
• Team directories: Show role, contact details and status when hovering a member avatar.
• Link previews: Display a title, description and image for an external or internal link.
• Repositories and projects: Summarize stars, language and last update on developer platforms.
• Product references: Show price and stock when hovering a product name in an article or order.

Customizing the Shadcn Hover Card

Set the width with a class such as w-80 on HoverCardContent, change where it opens with side and align, and tune the timing with openDelay and closeDelay on the root. The card uses the popover background, foreground and ring colors from your theme; create a matching palette with the free Theme Generator.

For example, this opens a wider card to the right of the trigger:

<HoverCard openDelay={200}>
  <HoverCardTrigger asChild>
    <a href="/projects/atlas">Atlas</a>
  </HoverCardTrigger>
  <HoverCardContent side="right" align="start" className="w-96">
    ...
  </HoverCardContent>
</HoverCard>

Hover Card Accessibility and Keyboard Support

A hover card is meant as a visual enhancement for pointer users. It opens when the trigger gets keyboard focus, but screen reader users do not get the content announced, and touch devices have no hover at all. Treat the card as a shortcut: the same information should always be reachable another way, usually by following the trigger link to the full page.

Use a real link or button as the trigger so it is focusable, and give avatar triggers an accessible name with alt text or an aria-label. If the content is required to complete a task, use a click based Popover instead.

Hover Card Best Practices

• Keep the card small and scannable: an avatar, a name, one or two lines and at most a couple of actions.
• Never put information in the card that is not available anywhere else.
• Use a short open delay so the card does not pop up while users simply move the pointer across the page.
• Make the trigger a link to the full page, so clicking it still works on touch devices.
• Avoid hover cards on dense lists where many triggers sit next to each other; the cards will keep interrupting.
• For a single line of help text, use a Tooltip instead.

Components Related to Hover Card

Shadcn Hover Card FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.