Skip to Content
FrontendBundlesComponentsUI PrimitivesPopover

Popover

A floating panel that appears relative to a trigger element. Use for interactive content that doesn’t need a full modal.

Import

import {
  Popover, PopoverTrigger, PopoverContent,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Popover";

Usage

import { Popover, PopoverTrigger, PopoverContent } from "...";
import { Button } from "...";
 
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Filters</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="flex flex-col gap-4">
      <h4 className="font-medium">Filters</h4>
      {/* filter controls */}
    </div>
  </PopoverContent>
</Popover>

Notes

  • PopoverContent positions itself automatically using Floating UI
  • Closes on outside click or Escape key
  • Used internally by Combobox, ColorPicker, and Calendar components
Last updated on
TooltipCollapsible