Dialog

Source: packages/shared/components/ui/dialog.tsx Primitives: @radix-ui/react-dialog

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@prosper/shared/components/ui/dialog";

Preview

Sub-components

Component	Description
`Dialog`	Root — manages open/close state
`DialogTrigger`	Element that opens the dialog on click
`DialogContent`	The modal panel (centered, portaled, with overlay)
`DialogHeader`	Top section with title and description
`DialogTitle`	`<h2>` heading — `text-lg font-semibold`
`DialogDescription`	Muted subtitle text
`DialogFooter`	Bottom actions area — stacks on mobile, row on desktop
`DialogClose`	Close button (X icon in top-right by default)

Default Behavior

Content is portaled to the body and centered with translate(-50%, -50%)
Overlay is bg-black/50 with fade animation
Content has zoom + fade animation on open/close
Close button (X) is automatically rendered in the top-right corner
Max width: sm:max-w-lg

Usage Example

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="tertiary">Cancel</Button>
      </DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Notes

For destructive confirmations, prefer AlertDialog which requires explicit dismiss.
Override in Landing MobileNavModal: Bypasses DialogContent entirely and uses DialogPrimitive.Content directly with a full-screen mobile nav layout (fixed inset-0, bg-[var(--color-gray-900)]). The DialogOverlay is also overridden with className="bg-black/60 backdrop-blur-sm z-[100]" for a heavier blur effect and elevated z-index.