Hover Card

Stable

Radix UI-backed preview card that expands rich metadata, avatar dossiers, or live server health cards upon mouse hover or focus.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  HoverCard, 
  HoverCardTrigger, 
  HoverCardContent 
} from '@siberui/react';

Basic Usage & Profile Preview

HoverCard activates after an intentional hover delay to preview supplementary information without leaving the page.

@zero_day_operator

tsx

<div className="flex items-center justify-center">
  <HoverCard>
    <HoverCardTrigger asChild>
      <a href="#profile" className="font-mono text-cyan-400 font-bold hover:underline cursor-pointer">
        @zero_day_operator
      </a>
    </HoverCardTrigger>
    <HoverCardContent className="w-80">
      <div className="flex gap-4">
        <Avatar name="Operator 01" ring="cyan" size="md" />
        <div className="space-y-1">
          <h4 className="text-sm font-bold text-white">Lead Sentinel Officer</h4>
          <p className="text-xs text-slate-400">
            Automating zero-trust distributed defense clusters.
          </p>
          <div className="flex items-center gap-1.5 pt-2 text-[10px] font-mono text-slate-500">
            <Calendar className="h-3 w-3" />
            <span>Clearance issued Dec 2024</span>
          </div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</div>

Neon Cybernetic Telemetry Hover Card

Pass variant="neon" to apply cyan perimeter lighting and monospace telemetry tables.

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="neon" glow size="sm">
      NODE_ORBITAL_ALPHA
    </Button>
  </HoverCardTrigger>
  <HoverCardContent variant="neon" className="w-80 space-y-3 font-mono text-xs">
    <div className="flex justify-between items-center pb-2 border-b border-cyan-500/30">
      <span className="font-bold text-cyan-300">TELEMETRY PREVIEW</span>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <div className="space-y-1.5 text-slate-300">
      <p>IP: 10.240.4.19</p>
      <p>Packet Throughput: 14.8 GB/s</p>
      <p>Lattice Consensus: 32/32</p>
    </div>
  </HoverCardContent>
</HoverCard>

Frosted Cyber-Glass Node Card

Translucent acrylic hover cards floating over circuit substrate textures.

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex items-center justify-center">
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="glass">HOVER OVER SATELLITE</Button>
    </HoverCardTrigger>
    <HoverCardContent variant="glass" className="w-80 space-y-2">
      <span className="font-mono text-xs font-bold text-white">ORBITAL EGRESS LINK</span>
      <p className="text-xs text-slate-300 font-mono">Ka-band transponder nominal.</p>
    </HoverCardContent>
  </HoverCard>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Operator Dossier Card

Composite mission defense card with embedded hover preview triggers.

CLEARANCE ROSTER

LEVEL 4

Hover over personnel badges to inspect access tokens.

AGENT_0x42

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">CLEARANCE ROSTER</CardTitle>
      <Badge variant="neon" size="sm">LEVEL 4</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Hover over personnel badges to inspect access tokens.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 flex justify-around">
    <HoverCard>
      <HoverCardTrigger asChild>
        <Badge variant="neon" className="cursor-pointer">AGENT_0x42</Badge>
      </HoverCardTrigger>
      <HoverCardContent variant="neon" className="w-72 font-mono text-xs space-y-2">
        <p className="font-bold text-cyan-300">KYBER KEY: 0x9F41</p>
        <p className="text-slate-400">Role: Primary Intercept Analyst</p>
      </HoverCardContent>
    </HoverCard>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	Visual theme for HoverCardContent.	"default" \| "neon" \| "glass"	"default"
align	Alignment relative to the trigger element.	"start" \| "center" \| "end"	"center"
sideOffset	Distance in pixels from the anchor element.	number	6

Accessibility

Radix UI Hover Card: Provides accessible hover intent delays so unintentional pointer sweeps do not trigger flickering cards.

Best Practices

Preview vs Interaction: Hover cards are intended for passive supplementary preview information; for critical actionable buttons, use Popover or Dialog.