Popover

Displays rich content in a portal, triggered by a button.

Installation

Install the required dependencies for the Popover component.

npm install @radix-ui/react-popover

Usage

The Popover component is built on top of Radix UI's Popover primitive.

Examples

Common examples of the Popover component in use.

With Form

Props

Available props for the Popover component and its subcomponents.

Popover

Prop
Type
Default
Description
defaultOpen
boolean
false

The open state of the popover when it is initially rendered

open
boolean
undefined

The controlled open state of the popover

onOpenChange
function
undefined

Event handler called when the open state of the popover changes

PopoverContent

Prop
Type
Default
Description
align
'start' | 'center' | 'end'
'center'

The preferred alignment against the trigger

sideOffset
number
4

The distance in pixels from the trigger

className
string
undefined

Additional classes for styling