Skip to main content

Popovers

A popover component for displaying content in a floating panel. Built on Radix UI primitives with customizable positioning and arrow support. Perfect for dropdowns, menus, and contextual information.

Installation

Loading...

Import

Loading...

Usage

Use Popover for contextual information, dropdowns, and floating panels. Choose appropriate positioning to avoid viewport overflow. Use arrow for better visual connection to trigger. Use ComposedPopover for simpler API when you don't need full control. Keep popover content concise.

Design Guidelines

Maintain consistent popover styling throughout your application. Use appropriate positioning to avoid covering important content. Keep popover content focused and concise. Use arrows for better visual connection. Position popovers clearly relative to their triggers.

Basic Usage

Simple popover with trigger

Loading...

Positioning

Popover with different positions

Loading...

With Arrow

Popover with arrow pointing to trigger

Loading...

Form in Popover

Popover containing a form

Loading...

Composed Popover

Using ComposedPopover for simpler API

Loading...

Controlled Popover

Popover with controlled open state

Loading...

Popover

Root popover component that manages popover state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.

NameTypeDefaultDescription
open
boolean

Controlled open state

defaultOpen
boolean

Uncontrolled default open state

onOpenChange
(open: boolean) => void

Callback fired when open state changes

className
string

Additional CSS classes to apply to the component

asChild
booleanfalse

When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details.

PopoverTrigger

Element that triggers the popover This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.

NameTypeDefaultDescription
tooltip
string | React.ComponentProps<typeof TooltipContent>

Optional tooltip to show on hover

asChild
booleanfalse

When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details.

className
string

Additional CSS classes to apply to the component

PopoverContent

Content container for the popover This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.

NameTypeDefaultDescription
side
"top" | "right" | "bottom" | "left""bottom"

Side of the trigger to display the popover

align
"start" | "center" | "end""center"

Alignment of the popover relative to trigger

sideOffset
number4

Distance in pixels from the trigger

arrow
booleantrue

Whether to show an arrow pointing to the trigger

children
React.ReactNode

Popover content

className
string

Additional CSS classes to apply to the component

asChild
booleanfalse

When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details.

PopoverArrow

Arrow element pointing to trigger This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.

NameTypeDefaultDescription
height
number8

Height of the arrow

width
number16

Width of the arrow

className
string

Additional CSS classes to apply to the component

asChild
booleanfalse

When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details.

ComposedPopover

Composed popover with simplified API This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.

NameTypeDefaultDescription
Trigger
React.ComponentType

Component to use as trigger

TriggerProps
object

Props to pass to the trigger component

children
React.ReactNode

Popover content

contentProps
PopoverContentProps

Additional props to pass to PopoverContent

className
string

Additional CSS classes to apply to the component

asChild
booleanfalse

When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details.

Accessibility

Accessibility features and considerations

Popover includes proper ARIA attributes and focus management. Focus moves to popover content when opened. Escape key closes the popover. Screen readers announce popover content. Ensure popover content is keyboard accessible.