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

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

Common examples of the Popover component in use.

Available props for the Popover component and its subcomponents.

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

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