Components · Overlays
Popover
StableSince v0.0.1
Floating content panel anchored to a trigger element.
import { Popover } from '@nexub/react';Examples
Default
With close button
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Popover.Root | compound | — | Root provider that manages open/close state. |
| Popover.Trigger | compound | — | Element that toggles the popover on click. |
| Popover.Content | compound | — | The floating content panel. |
| Popover.Arrow | compound | — | Optional arrow pointing to the trigger. |
| Popover.Close | compound | — | Button that closes the popover. |
| side | 'top' | 'right' | 'bottom' | 'left' | — | Preferred side of the trigger to render the content. |
| align | 'start' | 'center' | 'end' | — | Alignment of the content relative to the trigger. |
| sideOffset | number | — | Distance in pixels between the trigger and the content. |
| surface | 'solid' | 'glass' | 'solid' | Glass material on Popover.Content — see Foundations → Materials. |
On iOS & Android
Web only
Popover has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.