diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index a458ea449..c4d5db164 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Modal } from './modal';
 import { Button } from './button';
 import { cn } from '@/lib/utils';
@@ -5,7 +6,8 @@ import { AlertCircle, Info } from 'lucide-react';
 
 export interface DialogProps {
   open: boolean;
-  onClose: () => void;
+  onClose?: () => void;
+  onOpenChange?: (open: boolean) => void;
   title?: string;
   children: React.ReactNode;
   footer?: React.ReactNode;
@@ -38,6 +40,7 @@ const variantStyles = {
 export function Dialog({
   open,
   onClose,
+  onOpenChange,
   title,
   children,
   footer,
@@ -49,18 +52,26 @@ export function Dialog({
   showCancel = true,
   size = 'md',
 }: DialogProps) {
+  const handleClose = () => {
+    if (onOpenChange) {
+      onOpenChange(false);
+    } else if (onClose) {
+      onClose();
+    }
+  };
+
   const handleConfirm = async () => {
     if (onConfirm) {
       await onConfirm();
     }
-    onClose();
+    handleClose();
   };
 
   const handleCancel = () => {
     if (onCancel) {
       onCancel();
     }
-    onClose();
+    handleClose();
   };
 
   const IconComponent = variantIcons[variant];
@@ -69,7 +80,7 @@ export function Dialog({
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       size={size}
       closeOnOverlayClick={variant === 'default'}
     >
@@ -184,3 +195,71 @@ export function DialogFooter({ children, className }: DialogFooterProps) {
     </div>
   );
 }
+
+// Radix UI-style components for compatibility
+export interface DialogContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogContent({ children, className }: DialogContentProps) {
+  return <div className={cn('p-6', className)}>{children}</div>;
+}
+
+export interface DialogDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogDescription({
+  children,
+  className,
+}: DialogDescriptionProps) {
+  return (
+    <p className={cn('text-sm text-muted-foreground', className)}>
+      {children}
+    </p>
+  );
+}
+
+export interface DialogTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DialogTitle({ children, className }: DialogTitleProps) {
+  return (
+    <h2
+      className={cn(
+        'text-2xl font-semibold leading-none tracking-tight',
+        className,
+      )}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export interface DialogTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+  onClick?: () => void;
+}
+
+export function DialogTrigger({
+  children,
+  asChild,
+  onClick,
+}: DialogTriggerProps) {
+  // If asChild, we expect the child to handle the click
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      onClick: onClick || children.props.onClick,
+    } as any);
+  }
+  return (
+    <div onClick={onClick} style={{ display: 'inline-block' }}>
+      {children}
+    </div>
+  );
+}