Hover Card

A preview card that appears when a link is hovered or focused.

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

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger
        href="#"
        delay={300}
        closeDelay={150}
        className="rounded-sm text-sm font-medium underline underline-offset-4 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
      >
        @kagadmodyaa
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex gap-4">
          <Avatar>
            <AvatarFallback>K</AvatarFallback>
          </Avatar>
          <div className="grid gap-1">
            <h4 className="text-sm font-semibold">@kagadmodyaa</h4>
            <p className="text-sm text-muted-foreground">
              A small studio making components you copy into your own project.
            </p>
            <p className="pt-1 text-xs text-muted-foreground">Joined September 2026</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/hover-card.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Hover Card imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<HoverCard>
  <HoverCardTrigger href="/kagadmodyaa" delay={300}>@kagadmodyaa</HoverCardTrigger>
  <HoverCardContent>
    A small studio making components you copy into your own project.
  </HoverCardContent>
</HoverCard>

Examples

Placement

top right bottom

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

export default function HoverCardSide() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      {(['top', 'right', 'bottom'] as const).map(side => (
        <HoverCard key={side}>
          <HoverCardTrigger
            href="#"
            delay={150}
            className="rounded-sm text-sm font-medium capitalize underline underline-offset-4 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
          >
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side} className="w-56">
            <p className="text-sm text-muted-foreground">Opens on the {side} side of the link.</p>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}

API Reference

Name	Type	Default	Description
open / onOpenChange	boolean / (open: boolean) => void	—	Control the open state from outside (set on HoverCard).
defaultOpen	boolean	false	Initial open state (uncontrolled).
HoverCardTrigger delay	number	600	Milliseconds the pointer must rest on the trigger before the card opens.
HoverCardTrigger closeDelay	number	300	Milliseconds before the card closes after the pointer leaves.
HoverCardContent side	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Which side of the trigger the card is placed on.
HoverCardContent align	'start' \| 'center' \| 'end'	'center'	Alignment along that side.
HoverCardContent sideOffset	number	8	Gap between the trigger and the card, in pixels.