Skip to content

Popover

An anchored panel that oozes out of its trigger — the two shapes pinch apart like liquid. For transient context: coin-selection detail, fee breakdowns, address provenance. Anything requiring a decision belongs in a dialog instead.

Open state (static replicas)

The live panel renders in a portal at <body> with a runtime-computed clip-path, so it cannot be pinned open inline. These replicas show the exact panel surface and gap geometry for both sides. The trigger carries data-state=open while its panel is out.

Closed trigger
side=bottom, open (replica)

14px gap below the trigger.

side=top, open (replica)

Panel above; origin flips to bottom.

import { Popover, PopoverContent, PopoverTrigger } from "@coldharbor/ui";

<Popover side="bottom" align="start">
  <PopoverTrigger>
    <Button variant="secondary">3 inputs</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>3 UTXOs · 0.245 000 00 BTC selected.</p>
  </PopoverContent>
</Popover>
  • --ch-surface-raised
  • --ch-fg
  • --ch-fg-muted
  • --ch-border
  • --ch-focus

Live specimens

Click (or hover, for the hover-mode specimen) to watch the goo morph. Escape or an outside click dismisses. The morph collapses to a fade under reduced motion.

trigger=click (default)
trigger=hover
side=top, align=end
<Popover trigger="hover" side="top" align="end" sideOffset={14} panelRadius={16}>
  …
</Popover>
  • --ch-surface-raised
  • --ch-fg
  • --ch-fg-muted
  • --ch-border
  • --ch-focus

Themes

Open panel replica beneath its trigger, under all three layers.

  • --ch-surface-raised
  • --ch-fg
  • --ch-fg-muted
  • --ch-border
  • --ch-focus