Ravox KitOverlays
Popover
Interactive content attached to a button, without locking the page: quick filters, sharing, editing a value in place. Opens on the top layer, flips to the other side when it doesn't fit, moves focus inside and returns it on Esc.
Settings
Toggles
Examples
Edit in place and close on save
Visible columns, end-aligned
Help next to a field, with arrow
Taxa de conversão
Installation
The command creates components/ui/popover.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add popoverProps
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | <PopoverContent>: which side of the trigger it opens on. Flips to the opposite side when space runs out; on mobile, side placement falls back to below. |
| align | "start" | "center" | "end" | "center" | Alignment with the trigger on the other axis. Slides into the screen if it goes past the edge. |
| arrow | boolean | false | Small arrow pointing to the middle of the trigger. |
| sideOffset | number | 8 | Space between the trigger and the popover, in px. |
| innerClassName | string | — | Classes for the inner part (padding and scrolling). className goes on the box. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | <Popover>: controlled or uncontrolled. |
| asChild | boolean | false | <PopoverTrigger>: uses your own element as the trigger. |
| Peças | PopoverTrigger · PopoverContent · PopoverTitle · PopoverClose | — | The title becomes the accessible name (without it, pass aria-label). PopoverClose and usePopover().close() return focus to the trigger. |