Popover Component
React popover component with rich content, twelve placement combinations, outside-click and Escape dismissal, controlled and uncontrolled modes.
Import
1import { Popover } from "@neuctra/ui";Basic Usage
Click the trigger to toggle. Clicking outside or pressing Escape closes it.
Placement
position sets the side; align sets the edge alignment on that side.
Rich Content
Props
All available props for the Popover component.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | Element that toggles the popover (required) |
| children | ReactNode | — | Panel content (required) |
| position | "top" | "bottom" | "left" | "right" | "bottom" | Side of the trigger |
| align | "start" | "center" | "end" | "center" | Alignment along that side |
| open / defaultOpen | boolean | — | Controlled / uncontrolled open state |
| onOpenChange | (open: boolean) => void | — | Fired on every open/close |
| closeOnClickOutside | boolean | true | Dismiss when clicking outside |
| closeOnEscape | boolean | true | Dismiss with the Escape key |
| disabled | boolean | false | Disable the trigger |
| className | string | — | Styles the root wrapper around trigger + panel. |
| triggerClassName | string | — | Styles the wrapper around the trigger element. |
| contentClassName | string | — | Styles the floating panel. |
| contentStyle | CSSProperties | — | Inline styles for the floating panel. |
Accessibility
- The trigger exposes aria-haspopup="dialog", aria-expanded and aria-controls.
- Enter and Space toggle the popover from the keyboard.
- Document listeners attach only while open, and never go stale on onOpenChange.
Frequently Asked Questions
How do I install and import the Popover component?
Install the @neuctra/ui package, then import it with: import { Popover } from "@neuctra/ui";
Can I customize the Popover component's appearance?
Yes. Popover accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.
Is the Popover component accessible?
Popover is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.