PopoverInDialog() — ui Function Reference

Architecture documentation for the PopoverInDialog() function in popover-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ PopoverInDialog() — ui Function Reference

Dependency Diagram

graph TD
  9d047dc8_8d04_6922_7ea1_67648e0f526e["PopoverInDialog()"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249["popover-example.tsx"]
  9d047dc8_8d04_6922_7ea1_67648e0f526e -->|defined in| 77b374ed_0d6d_ff09_1f6b_36c4bd1d2249
  style 9d047dc8_8d04_6922_7ea1_67648e0f526e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/popover-example.tsx lines 165–199

function PopoverInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Popover Example</DialogTitle>
            <DialogDescription>
              Click the button below to see the popover.
            </DialogDescription>
          </DialogHeader>
          <Popover>
            <PopoverTrigger
              render={<Button variant="outline" className="w-fit" />}
            >
              Open Popover
            </PopoverTrigger>
            <PopoverContent align="start">
              <PopoverHeader>
                <PopoverTitle>Popover in Dialog</PopoverTitle>
                <PopoverDescription>
                  This popover appears inside a dialog. Click the button to open
                  it.
                </PopoverDescription>
              </PopoverHeader>
            </PopoverContent>
          </Popover>
        </DialogContent>
      </Dialog>
    </Example>
  )
}