overlay
Popover
Rich floating content anchored to a trigger, with focus management and dismissal.
Examples
Form in a popover
Focus moves in on open and returns to the trigger on close. Escape and an outside click both dismiss it.
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add popover writes them, follows the same dependency graph, and fixes up the imports.
export {
Popover,
PopoverClose,
PopoverContent,
PopoverRoot,
PopoverTrigger,
popoverContentVariants,
} from './popover.js';
export type {
PopoverAlign,
PopoverContentProps,
PopoverProps,
PopoverSide,
PopoverTriggerProps,
} from './popover.types.js';API reference
PopoverProps
| Prop | Type | Description |
|---|---|---|
| open | boolean | — |
| defaultOpen | boolean | — |
| onOpenChange | (open: boolean) => void | — |
| modal | boolean | Keeps the popover open when the trigger is clicked again. |
| children | React.ReactNode | — |
PopoverTriggerProps
Also accepts everything from React.ButtonHTMLAttributes<HTMLButtonElement>.
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | — |
PopoverContentProps
Also accepts everything from React.HTMLAttributes<HTMLDivElement>.
| Prop | Type | Description |
|---|---|---|
| side | PopoverSide | — |
| align | PopoverAlign | — |
| sideOffset | number | Gap between the trigger and the panel, in px. |
| collisionPadding | number | Clearance kept from the viewport edge, in px. |
| arrow | boolean | Draw the little pointer at the trigger. |
| container | Element | null | Where to portal to. `null` renders in place, inside the trigger's parent. |
| trapFocus | boolean | Trap Tab inside the panel. |
| onEscapeKeyDown | (event: Event) => void | — |
| onPointerDownOutside | (event: Event) => void | — |
| onOpenAutoFocus | (event: Event) => void | — |
| onCloseAutoFocus | (event: Event) => void | — |