Popover - Keep React
Table of Contents#
Default Popover#
The Default Popover demonstrates a basic popover component.
Card Popover#
The Card Popover showcases a popover with a card view, providing a visually appealing way to present additional information or options.
Icon Popover#
The Icon Popover displays a popover with an icon, offering a compact and visually engaging way to provide additional context or actions.
API Reference#
Explore the available props for the Popover component:
| Property | Description | Type | Default |
|---|---|---|---|
| open | The controlled open state of the popover. | boolean | false |
| onOpenChange | Event handler called when the open state of the popover changes. | setState | null |
Content API Reference#
Explore the available props for the Popover content component:
| Property | Description | Type | Default |
|---|---|---|---|
| align | The preferred alignment against the anchor. | start center end | center |
| side | The preferred side of the anchor to render against when open. | top right bottom left | bottom |
| alignOffset | The preferred side of the anchor to render against when open. | number | 10 |
| arrowPadding | The padding between the arrow and the edges of the content. | number | 0 |
Reference#
Our modal component is built using the @radix-ui/react-popover package. For more information , follow the documentation @radix-ui/react-popover.