Popover

Stable

Radix UI-backed anchored floating overlay for rich micro-forms, dimensional parameter controls, and in-context cybernetic configurators.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Popover, 
  PopoverTrigger, 
  PopoverContent, 
  PopoverHeader, 
  PopoverFooter 
} from '@siberui/react';

Basic Usage & Dimensional Inputs

Popovers anchor directly to the trigger button with customizable alignment and offset parameters.

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary" leftIcon={<Settings2 className="h-4 w-4" />}>
      ADJUST RESOLUTION
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <PopoverHeader>
      <h4 className="font-medium text-white text-sm">Display Buffer Dimensions</h4>
      <p className="text-xs text-slate-400">Set viewport canvas raster parameters.</p>
    </PopoverHeader>
    <div className="grid gap-3 p-4">
      <FormField label="Canvas Width">
        <Input defaultValue="3840 px" />
      </FormField>
      <FormField label="Canvas Height">
        <Input defaultValue="2160 px" />
      </FormField>
    </div>
    <PopoverFooter>
      <Button variant="neon" size="sm" glow className="w-full">APPLY DIMENSIONS</Button>
    </PopoverFooter>
  </PopoverContent>
</Popover>

Neon Cybernetic Parameter Calibrator

Pass variant="neon" to apply cyan laser halos, dark deep blues, and monospace headers.

tsx

<Popover variant="neon">
  <PopoverTrigger asChild>
    <Button variant="neon" glow leftIcon={<Cpu className="h-4 w-4" />}>
      QUANTUM TUNER
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <PopoverHeader>
      <h4 className="font-mono text-cyan-400 font-bold text-xs">QUANTUM_LATTICE_CFG</h4>
      <p className="text-xs text-slate-400 font-mono">Micro-tune resonance frequency.</p>
    </PopoverHeader>
    <div className="p-4 space-y-3 font-mono text-xs text-cyan-300">
      <div className="flex justify-between py-1 border-b border-cyan-500/20">
        <span className="text-slate-400">Harmonic Bias</span>
        <span>+14.2 ppm</span>
      </div>
      <div className="flex justify-between py-1">
        <span className="text-slate-400">Phase Lock</span>
        <span className="text-emerald-400">LOCKED</span>
      </div>
    </div>
    <PopoverFooter>
      <Button size="sm" variant="neon" glow className="w-full">ENGAGE LOCK</Button>
    </PopoverFooter>
  </PopoverContent>
</Popover>

Frosted Cyber-Glass Subsystem Popover

Composite popovers with translucent acrylic blur over circuit substrate grids.

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 flex-col items-center justify-center">
  <Popover variant="glass">
    <PopoverTrigger asChild>
      <Button variant="glass" leftIcon={<Sliders className="h-4 w-4 text-cyan-400" />}>
        OPEN GLASS TUNER
      </Button>
    </PopoverTrigger>
    <PopoverContent className="w-72">
      <PopoverHeader>
        <h4 className="font-mono text-xs font-bold text-white">SUBSYSTEM GAIN</h4>
      </PopoverHeader>
      <div className="p-4 font-mono text-xs text-slate-300">
        Gain: +6.0 dB • SNR: 48 dB
      </div>
    </PopoverContent>
  </Popover>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Sensor Tuner Card

Composite mission defense card with embedded popover micro-calibrators.

SENSOR ARRAY TUNING

ONLINE

Calibrate local tracking aperture and sensitivity.

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">SENSOR ARRAY TUNING</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Calibrate local tracking aperture and sensitivity.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <Popover variant="neon">
      <PopoverTrigger asChild>
        <Button variant="neon" glow className="w-full">
          CALIBRATE SENSOR APERTURE
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <PopoverHeader>
          <h4 className="font-mono text-xs font-bold text-cyan-400">APERTURE_TUNER</h4>
        </PopoverHeader>
        <div className="p-4 font-mono text-xs text-slate-300 space-y-2">
          <p>Focal Length: 1200 mm</p>
          <p>Effective ISO: 6400</p>
        </div>
      </PopoverContent>
    </Popover>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	Visual style for PopoverContent and its helper headers/footers.	"default" \| "neon" \| "glass"	"default"
align	Alignment of the popover content relative to the trigger.	"start" \| "center" \| "end"	"center"
sideOffset	Distance in pixels between the anchor and the popover.	number	4

Accessibility

Radix UI Primitive: Built on W3C WAI-ARIA Popover pattern with automated focus trapping and keyboard Escape dismissal.

Best Practices

Lightweight Micro-Forms: Use Popover for transient 1-2 field adjusters rather than full multistep wizards (which belong in Dialog).