Popovers
Floating panels anchored to a trigger — alignment, rich content, and actions. Built on the Portal-based Popover component (z-60, click to toggle, ESC + outside-click to dismiss).
Alignment
Start, center, end — relative to the trigger
With Title
Header with optional badge / metadata
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
Anatomy & Tips
What goes inside a great popover
Dimensions
Default width is min-w-[220px]. 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.
Portal-based
Renders via createPortal at z-60, so it always stacks above sidebar and header.