Lenso UI

Foundation component · Overlays

Popover

Anchored non-modal surface for focused contextual content or controls.

Live playground

Choose Popover when

  • Use for focused contextual controls that do not require a modal workflow.
  • Keep the arrow optional; anchored product menus commonly omit it.

Accessibility

  • Give every popup an accessible label or connect a visible title.
  • Base UI handles focus entry, Escape dismissal, and focus restoration.

Implementation

Composable Base UI parts with a themed portal and collision-aware positioning.

import { Popover } from "@lenso/ui/popover";

<Popover.Root>
  <Popover.Trigger>Open popover</Popover.Trigger>
  <Popover.Portal>
    <Popover.Positioner side="bottom">
      <Popover.Popup aria-label="Project actions">
        <Popover.Item>Edit issue</Popover.Item>
        <Popover.Item>Set reminder</Popover.Item>
        <Popover.Item tone="danger">Delete</Popover.Item>
      </Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</Popover.Root>;
Lenso UI