DocsDocsSDKs

Popover

React SDK guidance for Popover.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Popover when a small, contextual panel should float near its trigger without covering the whole page. It is the right fit for inline filter forms, quick settings, contextual help, and any interaction that should feel anchored to a specific element rather than centered on the screen.

If the content is longer or more complex (multi-step form, cart review, navigation tree), use Dialog or Sheet instead. If the content is just a short text label, Tooltip is simpler.

Slot strategy

Popover has three main pieces:

  • Popover is the root. It manages open/close state and accepts open and onOpenChange for controlled usage.
  • PopoverTrigger is the element that opens the panel. Use asChild to render your own button.
  • PopoverContent is the floating panel. It handles portal rendering and positioning automatically.

PopoverAnchor is available for advanced layouts where the panel should anchor to a different element than the trigger. Most use cases do not need it.

Positioning props live on PopoverContent

Use side, align, and sideOffset on PopoverContent to control where the panel appears relative to the trigger. The default is bottom-center with a 4px offset.

Behavior and theming guidance

The panel slides in from the direction opposite to its side prop and fades in with a subtle zoom. Radix handles collision avoidance automatically, so the panel repositions if it would overflow the viewport.

The default width is w-72 (18rem) from the recipe. Override it with a className on PopoverContent when the content needs more or less space.

For controlled popovers, manage state with open and onOpenChange. This is useful when the panel should close after a form submission or when you need to coordinate it with other UI state.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Popover.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Popover

# Popover > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/popover](https://sdk.enad.io/components/base-ui/popover). ## When to use it Use `Popover` when a small, contextual panel should float near its trigger without covering the whole page. It is the right fit for inline filter forms, quick settings, contextual help, and any interaction that should feel anchored to a specific element rather than centered on the screen. If the content is longer or more complex (multi-step form, cart review, navigation tree), use `Dialog` or `Sheet` instead. If the content is just a short text label, `Tooltip` is simpler. ## Slot strategy Popover has three main pieces: - `Popover` is the root. It manages open/close state and accepts `open` and `onOpenChange` for controlled usage. - `PopoverTrigger` is the element that opens the panel. Use `asChild` to render your own button. - `PopoverContent` is the floating panel. It handles portal rendering and positioning automatically. `PopoverAnchor` is available for advanced layouts where the panel should anchor to a different element than the trigger. Most use cases do not need it. > **Positioning props live on PopoverContent** > > Use `side`, `align`, and `sideOffset` on `PopoverContent` to control where the panel appears > relative to the trigger. The default is bottom-center with a 4px offset. ## Behavior and theming guidance The panel slides in from the direction opposite to its `side` prop and fades in with a subtle zoom. Radix handles collision avoidance automatically, so the panel repositions if it would overflow the viewport. The default width is `w-72` (18rem) from the recipe. Override it with a `className` on `PopoverContent` when the content needs more or less space. For controlled popovers, manage state with `open` and `onOpenChange`. This is useful when the panel should close after a form submission or when you need to coordinate it with other UI state. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Popover. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes