Hover Card React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Hover Card is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import HoverCard from @/components/ui/hover-card.

import { HoverCard } from "@/components/ui/hover-card"
import { Avatar } from "@/components/ui/avatar"

export function Mention() {
  return (
    <p className="text-sm">
      Ask{" "}
      <HoverCard
        trigger={
          <a href="/profile/emma.carter" className="font-semibold underline decoration-foreground/25 underline-offset-4">
            @emma.carter
          </a>
        }
        sheetTitle="Emma Carter's profile"
      >
        <div className="flex items-center gap-3">
          <Avatar src="/demo/ana-pop.jpg" name="Emma Carter" size="lg" status="online" className="[--avatar-ring:var(--popover)]" />
          <div className="min-w-0">
            <p className="text-[15px] font-semibold">Emma Carter</p>
            <p className="text-[13px] text-muted-foreground">Portland · member since 2019</p>
          </div>
        </div>
        <p className="mt-3 text-[13px] text-muted-foreground">48 listings · 4.9 ★ · replies in 1 h</p>
        <a href="/profile/emma.carter" className="mt-3 inline-block font-medium underline underline-offset-4">
          View profile
        </a>
      </HoverCard>{" "}
      about the bike.
    </p>
  )
}

Props

• trigger
  ReactNode

  What you hover, rendered asChild: an <a>, a router Link, a Button or an avatar wrapped in a button. It must pass a ref to its element. Plain text gets a focusable button with a dotted underline, for a name or a term inside a sentence.

• children
  ReactNode

  The preview: an avatar row and stats, a listing with its photo, an article with its image. Round inner parts with rounded-(--hover-card-inner-radius), which follows radius and padding (and is 16px in the sheet). Put a real link to the destination in it for touch screens.

• sheetTitledefault "Preview"
  string

  The bottom sheet's title for screen readers. The sheet shows no header, but a dialog needs a name: say what it previews, like "Profilul Anei Pop".

• sizedefault "md"
  "sm" | "md" | "lg" | "auto"

  Width of the floating card: 256, 288 or 384px, or auto to fit the content (192px at least). Never wider than the screen minus 12px a side. The sheet always spans the phone.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the card: 0, 12, 16 or 24px; full falls back to lg. The sheet keeps its own 28px top corners.

• paddingdefault "md"
  "none" | "sm" | "md" | "lg"

  Inner padding of the card: 0, 8, 16 or 20px. none lets a photo run to the edges (the card clips it to its corners), sm gives an inset photo with a matching smaller radius. The sheet always pads 20px.

• arrowdefault false
  boolean

  A small arrow with a rounded tip in the card's color, pointing at the trigger. Its sides carry on the card's hairline and it keeps clear of the corners.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  Where the card opens. It flips to the opposite side and slides along the edge when there is no room.

• aligndefault "center"
  "start" | "center" | "end"

  Alignment along the trigger's edge.

• sideOffsetdefault 8
  number

  Distance from the trigger in px. The arrow adds its own 8px on top.

• openDelaydefault 500
  number

  Hover (or keyboard focus) time in ms before it opens, so the pointer can cross a page full of links without cards popping up. 0 opens at once.

• closeDelaydefault 200
  number

  Time in ms before it closes after the pointer leaves the trigger and the card. It is the grace period for travelling onto the card; at 0 it closes before you get there.

• responsivedefault true
  boolean

  On phones (below 768px) and touch screens (a coarse pointer, like an iPad at 1024px) the first tap on the trigger opens the preview as a bottom sheet instead of following the link. Off: the floating card everywhere, and a tap follows the link.

• defaultOpendefault false
  boolean

  Starts open (uncontrolled). Leaving the trigger and the card, Escape or a click outside closes it.

• disableddefault false
  boolean

  Never opens and closes if it is open, e.g. for your own name in a list. The trigger keeps working: a link navigates on click and on tap.

• open
  boolean

  Controls it from outside, with onOpenChange.

• onOpenChange
  (open: boolean) => void

  Called on hover, focus, a tap on touch screens, Escape and outside clicks. Not called for opens refused while disabled.

• container
  HTMLElement | null

  Where the card (or the sheet) mounts. document.body by default.

• classNames
  Partial<Record<"content" | "body" | "arrow", string>>

  Extra classes for the card (hover-card-content, also the sheet), its padded scroll region (hover-card-body) and the arrow svg (set a fill-* to recolor it).

• className
  string

  Extra classes for the card, merged last. Other Radix content props pass through: alignOffset, collisionPadding (12), avoidCollisions, sticky, hideWhenDetached, onEscapeKeyDown, onPointerDownOutside.

Parts

FAQ

More React overlay components