Popover

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

Examples

Default

<Popover>
  <PopoverTrigger as-child>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent class="w-80">
    <div class="grid gap-4">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">
          Set the dimensions for the layer.
        </p>
      </div>
    </div>
  </PopoverContent>
</Popover>

Props

Popover

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the popover when it is initially rendered.
open	boolean	-	The controlled open state of the popover.
modal	boolean	false	The modality of the popover.

Slots

Popover

Slot	Description
default	The content of the popover.

PopoverTrigger

Slot	Description
default	The content of the trigger.

PopoverContent

Slot	Description
default	The items of the popover.