Popover

Stable

Displays rich content in a portal, triggered by a button.

Examples

Basic Usage

tsx
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline"><Settings2 className="mr-2 h-4 w-4"/> Adjust</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <h4 className="font-medium leading-none text-white">Dimensions</h4>
      <p className="text-sm text-slate-400">Set the dimensions for the layer.</p>
    </PopoverHeader>
    <div className="grid gap-4 p-4">
      <FormField label="Width"><Input defaultValue="100%" className="h-8" /></FormField>
      <FormField label="Height"><Input defaultValue="25px" className="h-8" /></FormField>
    </div>
  </PopoverContent>
</Popover>

Neon Variant

tsx
<Popover variant="neon">
  <PopoverTrigger asChild><Button variant="neon">Terminal Config</Button></PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <h4 className="font-mono text-cyan-300">CFG_WIDGET</h4>
    </PopoverHeader>
    <div className="p-4 text-xs font-mono text-cyan-400/70">
      Options loaded.
    </div>
    <PopoverFooter>
      <Button size="sm" variant="neon">Apply</Button>
    </PopoverFooter>
  </PopoverContent>
</Popover>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for the popover content."default" | "neon" | "glass"-