Components

Popover

Anchored floating panel: opens from its trigger with a drift-and-scale breath out of the anchor side, flipping to the opposite side when the viewport is too tight.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add popover

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Popover } from "@lumora/ui/components/popover";
// or from the barrel:
import { Popover } from "@lumora/ui";

Props worth knowing

trigger fills the built-in button and children fill the panel. side picks the preferred edge (default "bottom") and flips when the viewport is tight. Works controlled via open/onOpenChange or uncontrolled via defaultOpen; Escape, outside clicks and focus-out dismiss it. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.