Hover Card

Stable

For sighted users to preview content available behind a link.

Examples

Basic Usage

@siberui
tsx
<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="font-medium text-cyan-400 hover:underline">@siberui</a>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex justify-between space-x-4">
      <Avatar name="Siber UI" />
      <div className="space-y-1">
        <h4 className="text-sm font-semibold text-white">Siber UI</h4>
        <p className="text-sm text-slate-400">
          The minimalist cyberpunk UI library for React.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

API Reference

PropertyDescriptionTypeDefault
alignThe preferred alignment against the trigger."start" | "center" | "end""center"
sideOffsetThe distance in pixels from the trigger.number4