Popover
Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
Based on Headless UI.

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
Open popover
With close button
Popover
Name | Type | Required | Default | Description |
---|---|---|---|---|
position | top-start | top-end | bottom-start | bottom-end | right-start | right-end | left-start| left-end | top | bottom | right| left | No | bottom | Set placement for popover |
Render Props: | ||||
open | boolean | No | - | Whether or not the popover is open. |
Popover.Panel
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | No | - | Tailwind classes for custom styles. |
Render Props: | ||||
open | boolean | No | - | Whether or not the popover is open. |
close | () => void | No | - | Closes the popover. |