Hover Card

A card that appears when hovering over a trigger. For previewing linked content.

Installation

bash

npx shadcn@latest add hover-card

npx shadcn@latest add hover-card

Import

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

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

User profile preview

<HoverCard>  <HoverCardTrigger asChild>    <Button variant="link">@nafiz</Button>  </HoverCardTrigger>  <HoverCardContent className="w-80">    <div className="flex justify-between space-x-4">      <Avatar>        <AvatarImage src="https://github.com/nmfolio.png" />        <AvatarFallback>NM</AvatarFallback>      </Avatar>      <div className="space-y-1">        <h4 className="text-sm font-semibold">@nafiz</h4>        <p className="text-sm text-muted-foreground">          Building Reba Design System — open-source UI for multimedia platforms.        </p>        <div className="flex items-center pt-2">          <CalendarDays className="mr-2 h-4 w-4 text-muted-foreground" />          <span className="text-xs text-muted-foreground">Joined March 2021</span>        </div>      </div>    </div>  </HoverCardContent></HoverCard>

<HoverCard>  <HoverCardTrigger asChild>    <Button variant="link">@nafiz</Button>  </HoverCardTrigger>  <HoverCardContent className="w-80">    <div className="flex justify-between space-x-4">      <Avatar>        <AvatarImage src="https://github.com/nmfolio.png" />        <AvatarFallback>NM</AvatarFallback>      </Avatar>      <div className="space-y-1">        <h4 className="text-sm font-semibold">@nafiz</h4>        <p className="text-sm text-muted-foreground">          Building Reba Design System — open-source UI for multimedia platforms.        </p>        <div className="flex items-center pt-2">          <CalendarDays className="mr-2 h-4 w-4 text-muted-foreground" />          <span className="text-xs text-muted-foreground">Joined March 2021</span>        </div>      </div>    </div>  </HoverCardContent></HoverCard>

Custom delays

<HoverCard openDelay={200} closeDelay={100}>  <HoverCardTrigger asChild>    <Button variant="link">Hover me</Button>  </HoverCardTrigger>  <HoverCardContent>    <p className="text-sm">Opens faster, closes faster.</p>  </HoverCardContent></HoverCard>

<HoverCard openDelay={200} closeDelay={100}>  <HoverCardTrigger asChild>    <Button variant="link">Hover me</Button>  </HoverCardTrigger>  <HoverCardContent>    <p className="text-sm">Opens faster, closes faster.</p>  </HoverCardContent></HoverCard>

Props

PROPTYPEDEFAULTDESCRIPTION

openDelaynumber700Delay in ms before the card opens

closeDelaynumber300Delay in ms before the card closes

openboolean—Controlled open state

onOpenChange(open: boolean) => void—Called when open state changes

align"start" | "center" | "end""center"On HoverCardContent — alignment relative to trigger

side"top" | "right" | "bottom" | "left""bottom"On HoverCardContent — preferred side

sideOffsetnumber4On HoverCardContent — distance from trigger

Accessibility warning

HoverCard is not accessible via keyboard or touch \u2014 it only works on hover (pointer devices). Do not put critical information exclusively in a HoverCard. The trigger should always be a link or button that goes somewhere meaningful on its own.