Popover

Installation

pnpm dlx saastro add popover

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add popover --yes

pnpm add tailwind-variants

Usage

---
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui-saastro/popover";
import { Button } from "@/components/ui-saastro/button";
---

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Content goes here</p>
  </PopoverContent>
</Popover>

Examples

Basic

<Popover>
  <PopoverTrigger>
    <Button>Click me</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Simple popover content</p>
  </PopoverContent>
</Popover>

With Form

<Popover>
  <PopoverTrigger>
    <Button variant="outline">Open settings</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-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">
          <Label for="width">Width</Label>
          <Input id="width" value="100%" class="col-span-2 h-8" />
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <Label for="height">Height</Label>
          <Input id="height" value="25px" class="col-span-2 h-8" />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>

Components

Popover

The root container that manages the popover state.

PopoverTrigger

The element that triggers the popover when clicked.

PopoverContent

The content displayed inside the popover.

PopoverAnchor

An optional anchor element for positioning (advanced use cases).

Props

Popover

PopoverTrigger

PopoverContent

Data Attributes

Popover

PopoverContent

Accessibility

• Trigger uses aria-expanded to indicate state
• Trigger uses aria-haspopup="dialog" to indicate popover behavior
• Content uses role="dialog" for screen readers
• Focus is trapped inside popover when open
• Pressing Escape closes the popover
• Clicking outside closes the popover

Performance