PopoverInDialog() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ PopoverInDialog() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/popover-example.tsx lines 129–163

function PopoverInDialog() {
  return (
    <Example title="In Dialog">
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Popover Example</DialogTitle>
            <DialogDescription>
              Click the button below to see the popover.
            </DialogDescription>
          </DialogHeader>
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" className="w-fit">
                Open Popover
              </Button>
            </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>
  )
}