HoverCard

A pop-up card that appears when hovering over a trigger element.

Anatomy

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Portal>
    <HoverCard.Content />
  </HoverCard.Portal>
</HoverCard.Root>

Usage

import { HoverCard } from '@ivaldi/ui'
<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Hover me</Button>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Hover Card Title</h4>
      <p>This content appears when you hover.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

User Preview Card

<HoverCard.Root>
  <HoverCard.Trigger>
    <Link href="/users/123">@johndoe</Link>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="/avatars/01.png" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div className="flex flex-col gap-2">
        <h4 className="font-bold">John Doe</h4>
        <p className="text-sm text-muted">
          Software engineer. Building awesome things.
        </p>
        <div className="flex gap-4 text-sm text-muted">
          <div>1.2k followers</div>
          <div>427 following</div>
        </div>
      </div>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

Article Preview

<HoverCard.Root>
  <HoverCard.Trigger>
    <Link href="/blog/getting-started">
      Getting Started with Components
    </Link>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex flex-col gap-2">
      <img 
        src="/blog/thumbnail.png" 
        alt="Article thumbnail"
        className="rounded"
      />
      <h4 className="font-bold">Getting Started with Components</h4>
      <p className="text-sm text-muted">
        Learn how to build and customize components for your next project.
      </p>
      <div className="flex items-center gap-2 text-sm text-muted">
        <CalendarIcon className="size-4" />
        <span>Posted 2 days ago</span>
      </div>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

Custom Positioning

<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Open Top</Button>
  </HoverCard.Trigger>
  <HoverCard.Content side="top" align="start" sideOffset={8}>
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Custom Position</h4>
      <p>This appears on top with start alignment.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

With Panel Props

<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Hover for Details</Button>
  </HoverCard.Trigger>
  <HoverCard.Content 
    panelProps={{ 
      color: "primary",
      padding: "lg" 
    }}
  >
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Styled Panel</h4>
      <p>Using panel props for custom styling.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

HoverCard.Composed Props

PropTypeDefault
content*ReactNode
delayenum"short"
alignenum"center"
sideenum"top"
openDelaynumber
closeDelaynumber
typeenum
classNamestring
childrenReactNode
asChildboolean

HoverCard.Root Props

PropTypeDefault
childrenReactNode
openboolean
defaultOpenboolean
onOpenChangefunction
openDelaynumber
closeDelaynumber

HoverCard.Content Props

PropTypeDefault
forceMounttrue
onEscapeKeyDownfunction
onPointerDownOutsidefunction
onFocusOutsidefunction
onInteractOutsidefunction
classNamestring
childrenReactNode
asChildboolean
sideenum
sideOffsetnumber"4"
alignenum
alignOffsetnumber
arrowPaddingnumber
avoidCollisionsboolean
collisionBoundaryElement | Element[]
collisionPaddingsee more
stickyenum
hideWhenDetachedboolean
updatePositionStrategyenum
panelPropsany"{}"
containerElement | DocumentFragment

HoverCard.Portal Props

PropTypeDefault
childrenReactNode
containerElement | DocumentFragment
forceMounttrue

HoverCard.Trigger Props

PropTypeDefault
typeenum
classNamestring
childrenReactNode
asChildboolean