Popover

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

Based on Headless UI.

Popover

Anatomy

<Popover>
  <Popover.Trigger>...</Popover.Trigger>
  <Popover.Panel>...</Popover.Panel>
</Popover>

Default

Position

The complete list of all possible positions is in the props table below.

Trigger elements

With close button

Popover

NameTypeRequiredDefaultDescription
positiontop-start | top-end | bottom-start | bottom-end | right-start | right-end | left-start| left-end | top | bottom | right| leftNobottomSet placement for popover
Render Props:
openbooleanNo-Whether or not the popover is open.

Popover.Panel

NameTypeRequiredDefaultDescription
classNamestringNo-Tailwind classes for custom styles.
Render Props:
openbooleanNo-Whether or not the popover is open.
close() => voidNo-Closes the popover.