Components

Popover

A glass panel that opens from a button, on the native Popover API: small forms, cards and settings. For hints use Tooltip; for actions, Menu.

Import

import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '@rinzai/zen';

Examples

Controlled

Follow your own state with open; onOpenChange hears every open and close (outside clicks, Escape…).

API reference

A panel that opens from a button: a small form, a profile card, settings. A native popover, so outside clicks and Escape close it and focus returns to the button. Put a PopoverTrigger and a PopoverContent inside. Opens and closes on its own, or follows open (with onOpenChange to hear the user close it). For a hint on hover or focus, use Tooltip; for a list of actions, Menu.

Prop	Type	Default
`defaultOpen` Open when it first appears.	`boolean`	`false`
`onOpenChange` Every open and close: the trigger, outside clicks, Escape, PopoverClose.	`((open: boolean) => void)`	`—`
`open` Open or close it from your state; leave it out to let the trigger do it.	`boolean`	`—`

<PopoverTrigger>

The button that opens and closes the popover. With asChild, your own button (e.g. a Button) instead.

Prop	Type	Default
`asChild` Put the trigger's props on your own button element instead of rendering one.	`boolean`	`—`

<PopoverContent>

The panel: glass, below the trigger (above it if there's no room), centred on it by default. A dialog to assistive tech; give it aria-label or a heading it's labelled by when it holds a form.

Prop	Type	Default
`align` Centred on the trigger (default), or lined up with its start or end edge.	`"center" \| "end" \| "start"`	`center`
`offset` Gap from the trigger, in px.	`number`	`5`

<PopoverClose>

A button that closes its popover (after its own onClick, unless that calls preventDefault). Takes every Button prop: variant, size, asChild…

Prop	Type	Default
`asChild` Put the button's styles on the single child element (e.g. a link) instead of a <button>.	`boolean`	`—`
`loading` Shows a spinner and disables the button while an action runs.	`boolean`	`—`
`size`	`"default" \| "icon-lg" \| "icon-sm" \| "icon-xs" \| "icon" \| "lg" \| "sm" \| null`	`—`
`tone`	`"default" \| "inherit" \| "muted" \| "negative" \| null`	`—`
`variant`	`"default" \| "ghost" \| "link" \| "outline" \| "secondary" \| null`	`—`

Zen