A card that appears on hover with rich preview content. Built on Radix HoverCard with token-driven styling.

Import

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@sigil-ui/components";

Preview

Usage

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/profile">@kevin</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="font-semibold">Kevin Liu</p>
    <p className="text-sm text-[var(--s-text-muted)]">Design engineer</p>
  </HoverCardContent>
</HoverCard>

With avatar

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/user/42">Priya Laghari</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <Stack direction="row" gap={12} align="center">
      <img src="/jane.jpg" alt="" className="size-10 rounded-full" />
      <Stack gap={4}>
        <p className="font-semibold">Priya Laghari</p>
        <p className="text-sm text-[var(--s-text-muted)]">Joined March 2024</p>
      </Stack>
    </Stack>
  </HoverCardContent>
</HoverCard>

Open delay

<HoverCard openDelay={300} closeDelay={100}>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>Delayed open, fast close.</HoverCardContent>
</HoverCard>

Token integration

CSS Variable	Used for
`--s-surface`	Content background
`--s-border`	Content border
`--s-shadow-lg`	Content elevation
`--s-card-radius`	Border radius
`--s-duration-fast`	Enter/exit animation
`--s-ease-default`	Animation easing

Props

Prop	Type	Default	Description
`openDelay`	`number`	`200`	Milliseconds before opening
`closeDelay`	`number`	`150`	Milliseconds before closing
`children`	`ReactNode`	—	Trigger and content

HoverCardContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Card content

Accessibility

Opens on hover and focus for keyboard users
Content is announced via aria-describedby
Escape key dismisses the card

HoverCard

On this page