Popover
Overlay
Feedback
Floating content panels triggered by user interaction.
Preview
Simple popover with text content
Form in Popover
Popover containing form inputs
Positioning
Popover can be positioned on different sides
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Callback when open state changes |
defaultOpen | boolean | false | Initial open state (uncontrolled) |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred side for the popover |
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger |
sideOffset | number | 4 | Offset from trigger in pixels |
Usage
Import and implementation examples
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Button } from '@/components/ui/button'
// Basic usage
<Popover>
<PopoverTrigger asChild>
<Button>Open</Button>
</PopoverTrigger>
<PopoverContent>
<p>Popover content here</p>
</PopoverContent>
</Popover>
// With positioning
<Popover>
<PopoverTrigger asChild>
<Button>Open Top</Button>
</PopoverTrigger>
<PopoverContent side="top" align="start">
<p>Top-aligned popover</p>
</PopoverContent>
</Popover>
// Controlled popover
const [open, setOpen] = useState(false)
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button>Controlled</Button>
</PopoverTrigger>
<PopoverContent>
<Button onClick={() => setOpen(false)}>Close</Button>
</PopoverContent>
</Popover>Features
Built-in functionality
- Click to open: Opens on trigger click
- Four positions: Top, right, bottom, left placement
- Auto-positioning: Adjusts position to stay in viewport
- Click outside: Closes when clicking outside
- Smooth animations: Fade and zoom entrance/exit
- Form support: Works with inputs and forms
- Controlled mode: Full control over open state
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
aria-haspopup on triggeraria-expanded for open statearia-controls linking to contentrole="dialog" for popover contentKeyboard Navigation
| Key | Action |
|---|---|
| Enter/Space | Open popover |
| Escape | Close popover |
| Tab | Navigate within popover |
Notes
- Focus moves to popover when opened
- Focus returns to trigger when closed
- Screen reader announces popover content