Popover in five frameworks

The rendered popup

The attributes each framework puts on the open popup, read from the page.

Nothing open. Open a tile to fill its column.

Each tile sets modal to false, so five popups can be open at once; that is why aria-modal reads absent.

The same example, in each framework

Each tile above runs this file.

import { Popover } from '@hamur/react/popover'

export default function PopoverExample() {
  return (
    <Popover.Root>
      <Popover.Trigger className="button">
        Notifications
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className="popover">
            <Popover.Arrow className="arrow" />
            <Popover.Title className="popover-title">
              Notifications
            </Popover.Title>
            <Popover.Description className="muted">
              You are all caught up.
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  )
}

Measured, per framework

The frameworks against each other only, on the same machine and the same example.

Size is the gzip of the component's entry with core and dom. Open, Close and Memory are medians in Chromium 156 on Apple M3 Max, 35 runs per framework; Memory is what one open and close leaves on the heap. Tests are Popover's passing tests in each framework's suites. [N] is a value not measured yet.

Same props, five spellings

The Popover.Root names in each framework's own syntax.