Popover
A click-anchored floating panel for rich content.
Overview
A popover opens a floating surface-container panel anchored to its trigger —
for filters, quick settings, or any rich content that doesn't warrant a
dialog. It shares its surface, elevation and origin-aware motion with every
popup in the kit. Focus moves into the panel and returns on close.
$ npx morpha-ui add popoverExamples
Sides
Anchor to any side of the trigger with side (placement flips automatically
when there's no room).
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add popover. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add popoverAPI Reference
Prop
Type
Accessibility
- The trigger gets
aria-haspopupandaria-expanded; focus is trapped in the panel and restored on close (Base UI). - Esc and outside-click dismiss it.
- Use
PopoverTitle/PopoverDescriptionso the panel announces meaningfully.