Component

A floating surface anchored to a trigger. Use it for secondary content and controls that should not interrupt the current task.

preview

React
"use client";

import Popover from "@radui/ui/Popover";
import Button from "@radui/ui/Button";

const PopoverExample = () => {
    return (
        <Popover.Root>
            <Popover.Trigger asChild>
                <Button>Open popover</Button>
            </Popover.Trigger>
            <Popover.Portal>
                <Popover.Content sideOffset={12}>
                    <Popover.Arrow />
                    <Popover.Close asChild>
                        <Button>Close</Button>
                    </Popover.Close>
                </Popover.Content>
            </Popover.Portal>
        </Popover.Root>
    )
}

export default PopoverExample

Features

Positions against the trigger with viewport collision handling
Escape, outside pointer press and outside focus all dismiss
Controlled and uncontrolled open state via open, defaultOpen and onOpenChange
Optional modal mode that traps focus while open
Focus returns to the trigger when the popover closes

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Popover from "@radui/ui/Popover";

export default () => {
    return (
        <Popover.Root>
            <Popover.Trigger>Open popover</Popover.Trigger>
            <Popover.Portal>
                <Popover.Content>
                    <Popover.Close>Close</Popover.Close>
                    <Popover.Arrow />
                </Popover.Content>
            </Popover.Portal>
        </Popover.Root>
    )
}

Root

The root component for the Popover. Owns the open state and the parts rendered inside it.

Prop	Type	Default
open	boolean	--
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	--
modal	boolean	false
className	string	--
customRootClass	string	""

Trigger

The button that toggles the popover open and closed.

Prop	Type	Default
asChild	boolean	false
className	string	--
children	ReactNode	--

Portal

Renders the popover content into a portal so it escapes the trigger's overflow and stacking context.

Prop	Type	Default
children	ReactNode	--
container	Element \| null	--
forceMount	boolean	false

Content

The floating surface. Positions itself against the trigger and owns dismissal behaviour.

Prop	Type	Default
aria-label	string	--
aria-labelledby	string	--
side	"top" \| "right" \| "bottom" \| "left"	"bottom"
sideOffset	number	0
align	"start" \| "center" \| "end"	"center"
alignOffset	number	0
avoidCollisions	boolean	true
collisionPadding	number	0
collisionBoundary	Element \| null \| Array<Element \| null>	--
arrowPadding	number	0
sticky	"partial" \| "always"	"partial"
hideWhenDetached	boolean	false
forceMount	boolean	false
asChild	boolean	false
onOpenAutoFocus	(event) => void	--
onCloseAutoFocus	(event) => void	--
onEscapeKeyDown	(event: KeyboardEvent) => void	--
onPointerDownOutside	(event) => void	--
onFocusOutside	(event) => void	--
onInteractOutside	(event) => void	--

Close

Closes the popover and returns focus to the trigger.

Prop	Type	Default
asChild	boolean	false
className	string	--
children	ReactNode	--

Arrow

An optional pointer that tracks the trigger. Render it inside Content.

Prop	Type	Default
className	string	--
width	number	--
height	number	--

Anchor

Positions the popover against a specific element instead of the trigger.

Prop	Type	Default
className	string	--
children	ReactNode	--

Keyboard Interactions

Shortcut	Description
`Escape`	Closes the popover and returns focus to the trigger.
`Tab`	Moves focus to the next focusable element inside the popover content.
`Shift + Tab`	Moves focus to the previous focusable element inside the popover content.

ARIA References

Reference	What Rad UI follows
Dialog modal pattern	Content uses dialog semantics with labelling, focus containment and dismiss behaviour.