Popover

Floating content panel via Radix UI

Default

Usage

import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from '@tryvienna/ui'

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid gap-4">
      <div className="grid gap-2">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="height">Height</Label>
        <Input id="height" defaultValue="25px" />
      </div>
    </div>
  </PopoverContent>
</Popover>

Examples

Default

Default

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid gap-4">
      <div className="grid gap-2">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="height">Height</Label>
        <Input id="height" defaultValue="25px" />
      </div>
    </div>
  </PopoverContent>
</Popover>

API Reference

Popover

Also accepts all props from PopoverPrimitive.Root.

PopoverTrigger

Also accepts all props from PopoverPrimitive.Trigger.

PopoverContent

Prop	Type	Default	Description
align	"center" | "start" | "end"	center
sideOffset	number	4
container	Element | DocumentFragment | null | undefined	-

Also accepts all props from PopoverPrimitive.Content.

PopoverAnchor

Also accepts all props from PopoverPrimitive.Anchor.

Data Attributes

Component	data-slot
Popover	"popover-content"
PopoverTrigger	"popover-trigger"
PopoverContent	"popover-content"
PopoverAnchor	"popover-anchor"