Popover Component
A popover component that displays floating content when triggered.
- Built on top of Radix UI's Popover primitive
- Fully accessible with proper focus management
- Customizable positioning and alignment
- Ideal for displaying additional information or controls
Installation
The Popover component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the popover in your project.
React TSX
Examples
Basic Popover
A standard popover with a title and description.
Popover with Form
A popover containing form elements.
Popover Alignment Options
Popovers with different alignment options.
API Reference
Popover Component Parts
The Popover component is composed of several parts:
| Component | Description |
|---|---|
Popover | The root component that manages the popover state |
PopoverTrigger | The button that triggers the popover |
PopoverContent | The container for the popover content |
PopoverAnchor | Optional component to anchor the popover without using the trigger |
PopoverContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'center' | 'end' | 'center' | Controls alignment of the popover relative to the trigger |
sideOffset | number | 4 | Distance in pixels from the trigger |
className | string | - | Additional CSS classes to apply to the popover content |
forceMount | boolean | - | When used, popover content will always render regardless of open state |
Additionally, it accepts all the properties from Radix UI's PopoverContent component.
Accessibility
The Popover component follows WAI-ARIA guidelines for accessibility:
- Proper focus management when the popover opens and closes
- Keyboard navigation support
- ARIA attributes for screen readers
- Proper labelling of the trigger element