Warren UI

Popover

Anchored context panel with outside/Esc dismiss.

Source
"use client"

import { Button } from "@/registry/warren/button/button"
import { Input } from "@/registry/warren/input/input"
import { Popover } from "@/registry/warren/popover/popover"

export default function PopoverDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 py-12">
      <Popover
        label="route parameters"
        content={
          <div className="w-56 space-y-3">
            <p className="font-mono text-[10px] font-bold uppercase tracking-wide text-foreground">
              ROUTE PARAMS
            </p>
            <div className="space-y-1.5">
              <label
                className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground"
                htmlFor="popover-threshold"
              >
                Threshold
              </label>
              <Input id="popover-threshold" defaultValue="0.62" />
            </div>
            <div className="space-y-1.5">
              <label
                className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground"
                htmlFor="popover-scale"
              >
                Reward scale
              </label>
              <Input id="popover-scale" defaultValue="1.40" />
            </div>
          </div>
        }
      >
        <Button variant="outline">PARAMS</Button>
      </Popover>
      <Popover
        side="top"
        align="start"
        label="routing strategy"
        content={
          <div className="w-56 space-y-1.5">
            <p className="font-mono text-[10px] font-bold uppercase tracking-wide text-foreground">
              STRATEGY
            </p>
            <p className="font-mono text-[10px] uppercase leading-relaxed tracking-wide text-muted-foreground">
              GREEDY BREADTH-FIRST · MAX DEPTH 5 · PENALIZE STALE EDGES
            </p>
          </div>
        }
      >
        <Button variant="primary">STRATEGY</Button>
      </Popover>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/popover.json

Usage

import { Popover } from "@/components/ui/popover"
<Popover
  content={
    <div>
      <p className="font-mono text-[10px] font-bold uppercase tracking-wide">ROUTE PARAMS</p>
      <Input defaultValue="0.62" />
    </div>
  }
>
  <Button variant="outline">PARAMS</Button>
</Popover>

Popover wraps a single-element trigger (its children) and toggles an anchored panel on click. The panel closes on an outside pointerdown, on Escape, or on a second trigger click. The trigger carries aria-haspopup="dialog" and aria-expanded; the panel is a role="dialog" named by label.

Placement

side picks the edge (top · bottom · left · right, default bottom) and align the horizontal or vertical anchor along that edge (start · center · end, default center). The panel offsets 4px from the trigger.

API Reference

Prop

Type

On this page

InstallationUsagePlacementAPI Reference