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
Import
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
Positioning
Popover with different positions
With Arrow
Popover with arrow pointing to trigger
Form in Popover
Popover containing a form
Composed Popover
Using ComposedPopover for simpler API
Controlled Popover
Popover with controlled open state
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.
| Name | Type | Default | Description |
|---|---|---|---|
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 | boolean | false | 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.
| Name | Type | Default | Description |
|---|---|---|---|
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | Optional tooltip to show on hover |
asChild | boolean | false | 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.
| Name | Type | Default | Description |
|---|---|---|---|
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 | number | 4 | Distance in pixels from the trigger |
arrow | boolean | true | 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 | boolean | false | 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.
| Name | Type | Default | Description |
|---|---|---|---|
height | number | 8 | Height of the arrow |
width | number | 16 | Width of the arrow |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | 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.
| Name | Type | Default | Description |
|---|---|---|---|
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 | boolean | false | 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.