Popover

Guidelines#

Use it for small inline editors and pickers (a sending window, a date, a filter). Anything with its own navigation or more than a few fields belongs in a Sheet or Dialog.

What you provide: PopoverTrigger (usually an outline Button, via asChild) and PopoverContent with align (center default) and sideOffset (4px default). Default width is 288px (w-72); set another with className.

Anatomy: popover surface, border, radius-md, 16px padding, shadow-md.

Facts#

API#

TypeScript declarations emitted from src/components/ui/popover.tsx (the module also exports its other parts).

declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): any;
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): any;
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): any;
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): any;
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex justify-center pt-2" },
    h(DC.Popover, { defaultOpen: true },
      h(DC.PopoverTrigger, { asChild: true }, h(DC.Button, { variant: "outline" }, h(I.Clock), "Sending window")),
      h(DC.PopoverContent, { className: "w-80", onOpenAutoFocus: function (e) { e.preventDefault(); } },
        h("div", { className: "grid gap-3" },
          h("div", { className: "grid gap-1" },
            h("p", { className: "text-sm font-medium" }, "Sending window"),
            h("p", { className: "text-sm text-muted-foreground" }, "Mon–Fri · 09:00–17:00 · Europe/Paris")),
          h("div", { className: "grid grid-cols-2 gap-2" },
            h(DC.Input, { defaultValue: "09:00", "aria-label": "From" }),
            h(DC.Input, { defaultValue: "17:00", "aria-label": "To" }))))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#