Popover

Displays rich content in a portal, triggered by a button.

Installation

npx neobrutal add popover

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="neutral" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-bold leading-none">Dimensions</h4>
        <p className="text-sm text-black">
          Set the dimensions for the layer.
        </p>
      </div>
    </div>
  </PopoverContent>
</Popover>

Props

Popover

Prop	Type	Default	Description
open	boolean	-	The controlled open state of the popover.
defaultOpen	boolean	-	The default open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Event handler called when the open state changes.