Popover

Displays rich content in a floating panel, triggered by a button click.

Examples

Default

Open popover

Dimensions

Set the dimensions for the layer.

Width
Max. Width
Height
Max. Height 
<c-popover>
  <c-popover-trigger>
    <c-button variant="outline">Open popover</c-button>
  </c-popover-trigger>
  <c-popover-content popover-content-classes="w-80">
    <div class="grid gap-4">
      <div class="space-y-2">
        <h4 class="leading-none font-medium">Dimensions</h4>
        <p class="text-muted-foreground text-sm">
          Set the dimensions for the layer.
        </p>
      </div>
      <div class="grid gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
          <c-label>Width</c-label>
          <c-input value="100%" input-classes="col-span-2 h-8"></c-input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <c-label>Max. Width</c-label>
          <c-input value="300px" input-classes="col-span-2 h-8"></c-input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <c-label>Height</c-label>
          <c-input value="25px" input-classes="col-span-2 h-8"></c-input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <c-label>Max. Height</c-label>
          <c-input value="none" input-classes="col-span-2 h-8"></c-input>
        </div>
      </div>
    </div>
  </c-popover-content>
</c-popover>

Basic

A simple popover with just a title and description.

Open Popover

Dimensions

Set the dimensions for the layer.

 
<c-popover>
  <c-popover-trigger>
    <c-button variant="outline">Open Popover</c-button>
  </c-popover-trigger>
  <c-popover-content align="start">
    <div class="space-y-2">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-muted-foreground text-sm">
        Set the dimensions for the layer.
      </p>
    </div>
  </c-popover-content>
</c-popover>

Align

Use the align prop on c-popover-content to control the horizontal alignment.

Start Aligned to start Center Aligned to center End Aligned to end 
<div class="flex gap-6">
  <c-popover>
    <c-popover-trigger>
      <c-button variant="outline" size="sm">Start</c-button>
    </c-popover-trigger>
    <c-popover-content align="start" popover-content-classes="w-40">
      Aligned to start
    </c-popover-content>
  </c-popover>
  <c-popover>
    <c-popover-trigger>
      <c-button variant="outline" size="sm">Center</c-button>
    </c-popover-trigger>
    <c-popover-content align="center" popover-content-classes="w-40">
      Aligned to center
    </c-popover-content>
  </c-popover>
  <c-popover>
    <c-popover-trigger>
      <c-button variant="outline" size="sm">End</c-button>
    </c-popover-trigger>
    <c-popover-content align="end" popover-content-classes="w-40">
      Aligned to end
    </c-popover-content>
  </c-popover>
</div>

With Form

A popover with form fields inside using horizontal field layout.

Open Popover

Dimensions

Set the dimensions for the layer.

Width Height 
<c-popover>
  <c-popover-trigger>
    <c-button variant="outline">Open Popover</c-button>
  </c-popover-trigger>
  <c-popover-content align="start" popover-content-classes="w-64">
    <div class="space-y-2 mb-4">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-muted-foreground text-sm">
        Set the dimensions for the layer.
      </p>
    </div>
    <div class="grid gap-4">
      <c-field orientation="horizontal">
        <c-label data-slot="field-label" style="width: 80px;">Width</c-label>
        <c-input value="100%"></c-input>
      </c-field>
      <c-field orientation="horizontal">
        <c-label data-slot="field-label" style="width: 80px;">Height</c-label>
        <c-input value="25px"></c-input>
      </c-field>
    </div>
  </c-popover-content>
</c-popover>

API Reference

Popover

The root component that manages the popover state.

Prop Type Default Description
open boolean false Whether the popover is open.

Popover Trigger

Wraps the element that triggers the popover.

Prop Type Default Description
popover-trigger-classes string "" Additional CSS classes for the trigger wrapper.

Popover Content

The floating content panel.

Prop Type Default Description
side "top" | "bottom" | "left" | "right" "bottom" The preferred side of the trigger to render the content.
align "start" | "center" | "end" "center" The preferred alignment against the trigger.
side-offset number 4 The distance in pixels from the trigger.
align-offset number 0 An offset in pixels from the "start" or "end" alignment options.
no-avoid-collisions boolean false When true, disables collision avoidance with viewport edges.
collision-padding number 8 The padding around the viewport edges to maintain when avoiding collisions.
popover-content-classes string "" Additional CSS classes for the popover content.

Popover Close

An optional button/wrapper that closes the popover when clicked.

Prop Type Default Description
popover-close-classes string "" Additional CSS classes for the close wrapper.