Popover

Anchored floating panel for filters, pickers, and compact forms.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Popover, PopoverContent, PopoverTrigger } from "@payglocal_ui/flux-ui";

Example

<Popover>
  <PopoverTrigger asChild>
    <button type="button">Open</button>
  </PopoverTrigger>
  <PopoverContent>Content</PopoverContent>
</Popover>

// ── A panel that must not run off the bottom ──────────────────────────
// A trigger low on a long page has very little room beneath it, and a
// tall list plus a footer will run past the fold — the last options, and
// often Apply itself, end up unreachable. Radix measures that space; cap
// the content to it and lay the panel out as a column, so the fixed
// chrome stays put and only the list scrolls.
<PopoverContent className="flex max-h-[var(--radix-popover-content-available-height)] flex-col overflow-hidden">
  <div className="shrink-0 …">{header}</div>
  <div className="min-h-0 flex-1 overflow-y-auto">{list}</div>
  <div className="shrink-0 …">{footer}</div>
</PopoverContent>

// min-h-0 is what lets a flex child shrink below its content height at
// all; without it the list refuses to scroll and pushes the footer out.
// PopoverContent already keeps a 12px gutter from the viewport edge.