Hover Card

Preview card shown when hovering or focusing a link.

import { BuildingIcon, MailIcon, PhoneIcon } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'

export function HoverCardDemo() {
  return (
    <p className="max-w-sm text-center text-sm text-muted-foreground">
      Assigned to{' '}
      <HoverCard>
        <HoverCardTrigger
          delay={200}
          closeDelay={100}
          href="#anna-lindqvist"
          className="font-medium text-foreground underline underline-offset-4"
        >
          Anna Lindqvist
        </HoverCardTrigger>
        <HoverCardContent className="w-80 p-0">
          <div className="flex gap-3 p-4">
            <Avatar size="lg">
              <AvatarFallback>AL</AvatarFallback>
            </Avatar>
            <div className="flex min-w-0 flex-col gap-0.5">
              <div className="flex items-center gap-2">
                <h4 className="font-medium">Anna Lindqvist</h4>
                <Badge variant="outline">Available</Badge>
              </div>
              <p className="text-muted-foreground">Case officer, Building permits</p>
            </div>
          </div>
          <Separator />
          <dl className="grid gap-2 p-4 text-xs">
            <div className="flex items-center gap-2">
              <dt className="sr-only">Department</dt>
              <BuildingIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>Planning and Building Department</dd>
            </div>
            <div className="flex items-center gap-2">
              <dt className="sr-only">Phone</dt>
              <PhoneIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>021-39 14 22 · Mon–Thu 9–11</dd>
            </div>
            <div className="flex items-center gap-2">
              <dt className="sr-only">Email</dt>
              <MailIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>anna.lindqvist@vasteras.example</dd>
            </div>
          </dl>
        </HoverCardContent>
      </HoverCard>{' '}
      since 3 March 2026.
    </p>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/hover-card.json

Installs to @/components/ui/hover-card.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0

Copy the source into your project:

components/ui/hover-card.tsx

'use client'

import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
import { cn } from '@/lib/utils'

function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
	return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
}

function HoverCardContent({
	className,
	side = 'bottom',
	sideOffset = 4,
	align = 'center',
	alignOffset = 4,
	...props
}: PreviewCardPrimitive.Popup.Props &
	Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
	return (
		<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
			<PreviewCardPrimitive.Positioner
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
				className="isolate z-50"
			>
				<PreviewCardPrimitive.Popup
					data-slot="hover-card-content"
					className={cn(
						'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
						className,
					)}
					{...props}
				/>
			</PreviewCardPrimitive.Positioner>
		</PreviewCardPrimitive.Portal>
	)
}

export { HoverCard, HoverCardTrigger, HoverCardContent }

For sighted users to preview content available behind a link, such as a person, a case or a document. Built on Base UI PreviewCard, the card opens on hover or keyboard focus after a short delay.

Features

Opens on hover and focus
Configurable open and close delays (delay and closeDelay on HoverCardTrigger)
Pass the trigger element with render (e.g. render={<a href="…" />}); the trigger renders an <a> by default
Positioning on any side with alignment and offset
Rendered in a portal with enter and exit animations

Usage

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

export function OfficerPreview() {
  return (
    <HoverCard>
      <HoverCardTrigger delay={200} render={<Button variant="link" />}>@anna.lindqvist</HoverCardTrigger>
      <HoverCardContent>Case officer, Planning and Building Department.</HoverCardContent>
    </HoverCard>
  )
}

Examples

Default

An inline link to a case officer that previews their role and contact details.

import { BuildingIcon, MailIcon, PhoneIcon } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'

export function HoverCardDemo() {
  return (
    <p className="max-w-sm text-center text-sm text-muted-foreground">
      Assigned to{' '}
      <HoverCard>
        <HoverCardTrigger
          delay={200}
          closeDelay={100}
          href="#anna-lindqvist"
          className="font-medium text-foreground underline underline-offset-4"
        >
          Anna Lindqvist
        </HoverCardTrigger>
        <HoverCardContent className="w-80 p-0">
          <div className="flex gap-3 p-4">
            <Avatar size="lg">
              <AvatarFallback>AL</AvatarFallback>
            </Avatar>
            <div className="flex min-w-0 flex-col gap-0.5">
              <div className="flex items-center gap-2">
                <h4 className="font-medium">Anna Lindqvist</h4>
                <Badge variant="outline">Available</Badge>
              </div>
              <p className="text-muted-foreground">Case officer, Building permits</p>
            </div>
          </div>
          <Separator />
          <dl className="grid gap-2 p-4 text-xs">
            <div className="flex items-center gap-2">
              <dt className="sr-only">Department</dt>
              <BuildingIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>Planning and Building Department</dd>
            </div>
            <div className="flex items-center gap-2">
              <dt className="sr-only">Phone</dt>
              <PhoneIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>021-39 14 22 · Mon–Thu 9–11</dd>
            </div>
            <div className="flex items-center gap-2">
              <dt className="sr-only">Email</dt>
              <MailIcon className="size-3.5 text-muted-foreground" aria-hidden="true" />
              <dd>anna.lindqvist@vasteras.example</dd>
            </div>
          </dl>
        </HoverCardContent>
      </HoverCard>{' '}
      since 3 March 2026.
    </p>
  )
}

Case Preview

An inline case link that previews status, registration date and number of documents.

import { CalendarDaysIcon, FileTextIcon } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'

export function HoverCardCasePreview() {
  return (
    <p className="max-w-md text-sm leading-relaxed">
      The Building Committee’s decision refers to{' '}
      <HoverCard>
        <HoverCardTrigger
          delay={150}
          href="#case-2026-04812"
          className="font-medium text-primary underline underline-offset-4"
        >
          case 2026-04812
        </HoverCardTrigger>
        <HoverCardContent className="w-80">
          <div className="flex flex-col gap-3">
            <div className="flex items-start justify-between gap-3">
              <div className="flex flex-col gap-0.5">
                <span className="text-xs text-muted-foreground">2026-04812</span>
                <span className="font-medium">Building permit, Storgatan 14</span>
              </div>
              <Badge variant="secondary">In review</Badge>
            </div>
            <p className="text-xs text-muted-foreground">
              Extension of a detached house with a 24 m² conservatory. Neighbours have been notified.
            </p>
            <Separator />
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
              <span className="flex items-center gap-1.5">
                <CalendarDaysIcon className="size-3.5" aria-hidden="true" />
                Registered 14 Apr 2026
              </span>
              <span className="flex items-center gap-1.5">
                <FileTextIcon className="size-3.5" aria-hidden="true" />6 documents
              </span>
            </div>
          </div>
        </HoverCardContent>
      </HoverCard>
      , which was approved with conditions on 20 May 2026.
    </p>
  )
}

Facility Preview

A button trigger that previews a library’s opening hours, opening above the trigger.

import { ClockIcon, MapPinIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'

const hours = [
  { day: 'Monday–Thursday', time: '10:00–19:00' },
  { day: 'Friday', time: '10:00–17:00' },
  { day: 'Saturday', time: '11:00–15:00' },
  { day: 'Sunday', time: 'Closed' },
]

export function HoverCardFacilityPreview() {
  return (
    <div className="flex flex-col items-center gap-2 text-sm">
      <span className="text-muted-foreground">Pick up your reservation at</span>
      <HoverCard>
        <HoverCardTrigger delay={150} render={<Button variant="outline" />}>
          <MapPinIcon data-icon="inline-start" />
          Central Library
        </HoverCardTrigger>
        <HoverCardContent className="w-72" side="top">
          <div className="flex flex-col gap-3">
            <div className="flex flex-col gap-0.5">
              <h4 className="font-medium">Central Library</h4>
              <p className="text-xs text-muted-foreground">Kungsgatan 3 · Open today until 19:00</p>
            </div>
            <Separator />
            <dl className="grid grid-cols-[1fr_auto] gap-x-4 gap-y-1.5 text-xs">
              {hours.map((row) => (
                <div key={row.day} className="contents">
                  <dt className="text-muted-foreground">{row.day}</dt>
                  <dd className="text-right tabular-nums">{row.time}</dd>
                </div>
              ))}
            </dl>
            <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <ClockIcon className="size-3.5" aria-hidden="true" />
              Reservations are kept for 7 days.
            </p>
          </div>
        </HoverCardContent>
      </HoverCard>
    </div>
  )
}

Sides

Cards opening on each side of the trigger.

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

export function HoverCardSides() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <HoverCard key={side}>
          <HoverCardTrigger delay={100} render={<Button variant="outline" className="capitalize" />}>
            {side}
          </HoverCardTrigger>
          <HoverCardContent side={side} className="w-52">
            <p className="font-medium">Waste collection</p>
            <p className="text-xs text-muted-foreground">Next pick-up Tuesday 14 April. This card opens on the {side}.</p>
          </HoverCardContent>
        </HoverCard>
      ))}
    </div>
  )
}

Accessibility

Hover cards are ignored by screen readers; do not put essential information only in the card
The trigger should be a link or button so it can receive keyboard focus
Avoid interactive content that users must reach from the card
Use Popover instead when the content must be accessible on touch devices