DialogContent() — ui Function Reference

Architecture documentation for the DialogContent() function in dialog.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DialogContent() — ui Function Reference

Dependency Diagram

graph TD
  a7b559f4_9bce_bce4_ab19_9fbba9bf764f["DialogContent()"]
  1f1fb707_fd40_064f_629b_90fb57bde5be["dialog.tsx"]
  a7b559f4_9bce_bce4_ab19_9fbba9bf764f -->|defined in| 1f1fb707_fd40_064f_629b_90fb57bde5be
  style a7b559f4_9bce_bce4_ab19_9fbba9bf764f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/dialog.tsx lines 47–84

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "cn-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
          className
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close data-slot="dialog-close" asChild>
            <Button variant="ghost" className="cn-dialog-close" size="icon-sm">
              <IconPlaceholder
                lucide="XIcon"
                tabler="IconX"
                hugeicons="Cancel01Icon"
                phosphor="XIcon"
                remixicon="RiCloseLine"
              />
              <span className="sr-only">Close</span>
            </Button>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}