Popover

An accessible popup anchored to a button.

Installation


pnpm dlx shadcn@latest add @lumi-ui/popover

Anatomy

 <Popover>
  <PopoverTrigger/>
  <PopoverPopup />
 </Popover>

Usage

Use PopoverTrigger to anchor the interaction and PopoverPopup to render content.

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverPopup>Popover content</PopoverPopup>
</Popover>

You can add optional props like title, description, or showArrow for built-in structure and visual cues.

<PopoverPopup title="Popover title" description="Details here" showArrow>
  Content goes here.
</PopoverPopup>

Migration from shadcn/ui

Migrating from shadcn/ui's is straightforward. Lumi's version is powered by Base UI primitives, bringing improved structure and naming without changing how you use it.

Component Naming & Structure

shadcn/ui	lumi/ui	Change
`PopoverContent`	`PopoverPopup`	Renamed for clarity
`PopoverAnchor`	`PopoverPositioner`	More explicit name and added layout behavior
-	`PopoverClose`	New helper to close the popover from inside

Positioning & Alignment

PopoverPopup supports the same placement props as Base UI — such as side, align, sideOffset, and alignOffset — giving you granular control over popup placement relative to its trigger.

<PopoverPopup
  side="bottom"
  align="center"
  sideOffset={6}
  alignOffset={4}
  matchAnchorWidth
/>

By default, the popup opens below the trigger, centered horizontally.

Optional Arrow and Metadata

Support for:

Arrow via the showArrow prop
Titles and Descriptions (title, description props)

These are rendered automatically inside the popup:

<PopoverPopup
  title="Popover title"
  description="Description text"
  showArrow
>
  {/* Your content */}
</PopoverPopup>

Styling & Motion

While shadcn/ui relies on Radix's motion data states, Lumi uses Base UI's transition-style API, producing smoother scale-and-fade animations out of the box.

Migration Example

demo-popover.tsx

import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 
export function Demo() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>
      This is a popover.
      </PopoverContent>
    </Popover>
  );
}