Popover

Floating content. Free, MIT · Overlays and notifications › Popovers and tours

Installation

npx valyro-cli@latest add popover

npx shadcn@latest add https://valyro.xyz/r/popover.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Popover } from 'valyro-ui';

Prop	Type	Default
`trigger`	`ReactElement`		A single element (usually a button); it toggles the popover on click. Or `Popover.Trigger` in the children.
`children` *	`ReactNode`		Content of the panel (a non-modal `dialog`); Tab past its end returns focus to the page after the trigger. In the compound form, a `Popover.Trigger` and a `Popover.Content` instead. The trigger names the dialog unless it gets an `aria-label`, or an `aria-labelledby` pointing at a heading inside.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`arrow`	`boolean`	`false`	Small pointer towards the trigger, where the theme draws one (`--ui-popover-arrow`). Glass popovers grow out of their trigger without one, like iOS 26: the panel's backdrop-filter makes it a backdrop root, so an arrow inside it can only blur the panel's own pixels and reads as a clear sliver.
`placement`	`Placement`	`'bottom'`
`offset`	`number`
`matchAnchorWidth`	`boolean`
`closeOnOutside`	`boolean`
`closeOnEscape`	`boolean`
`insideRefs`	`RefObject<Element \| null>[]`		Extra elements treated as "inside" for outside-press detection. The anchor is included automatically.
`surface`	`boolean`		Apply the shared `.ui-floating` material (default true).
`animation`	`'pop' \| 'fade' \| 'spring' \| 'none'`		Enter/exit: `pop` (the theme's), `fade`, `spring` (springs out of the anchor's side) or `none`.

Popover.Trigger (PopoverTrigger), Popover.Content (PopoverContent)