Overlays Popover

Popover

A small panel by its button — a few fields, a choice, a note.

Preview

Usage

tsx

import { Popover, PopoverTrigger, PopoverContent, Button } from "zostel-ui";

<Popover>
  <PopoverTrigger asChild><Button variant="outline">Who's coming?</Button></PopoverTrigger>
  <PopoverContent className="w-80">…</PopoverContent>
</Popover>

PopoverContent

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"center"`	Against the trigger.
`sideOffset`	`number`	`4`	Gap from the trigger, px.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side; flips when there is no room.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

align

Type: "start" | "center" | "end"

Default: "center"

Against the trigger.

sideOffset

Type: number

Default: 4

Gap from the trigger, px.

side

Type: "top" | "right" | "bottom" | "left"

Default: "bottom"

Preferred side; flips when there is no room.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).