Popovers
Floating panels anchored to a trigger — positions, titles, rich content, and actions. Click outside or press Esc to close.
Positions
Four sides — top, right, bottom, left
Click any button to open. Click outside or press Esc to dismiss.
With Title
Header with optional close button
Rich HTML Content
Forms, calendars, and structured layouts
With Actions
Footer buttons, confirmation, and forms
Trigger Variations
Icon buttons, badges, avatars, text
Icon buttons
Avatar & badge triggers
AC
Pro
Conversion rate
Anatomy & Tips
What goes inside a great popover
Dimensions
Default width is w-64 (16rem). Override with the className prop.
Dismissal
Click outside, press Esc, or click the trigger again to close.
Nesting
Avoid putting essential UI inside popovers — they hide on dismiss. Use modals for blocking flows.
Accessibility
Uses role="dialog", aria-haspopup, and aria-controls.