rtCamp · abhishekxix · Jan 7, 2026 · Jan 7, 2026 · Jan 7, 2026 · Jan 8, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frappe-ui-react/package.json b/packages/frappe-ui-react/package.json
@@ -38,13 +38,10 @@
     "publish:remote": "npm publish"
   },
   "dependencies": {
+    "@base-ui/react": "^1.0.0",
     "@floating-ui/react": "^0.27.13",
     "@headlessui/react": "^2.2.6",
     "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",

diff --git a/packages/frappe-ui-react/src/components/dialog/dialog.css b/packages/frappe-ui-react/src/components/dialog/dialog.css
@@ -1,4 +1,4 @@
-@keyframes dialog-overlay-in {
+@keyframes dialog-backdrop-in {
   from {
     opacity: 0;
   }
@@ -7,7 +7,7 @@
   }
 }
 
-@keyframes dialog-overlay-out {
+@keyframes dialog-backdrop-out {
   from {
     opacity: 1;
   }
@@ -38,18 +38,18 @@
   }
 }
 
-.dialog-overlay[data-state='open'] {
-  animation: dialog-overlay-in 100ms ease-out;
+.dialog-backdrop[data-open] {
+  animation: dialog-backdrop-in 100ms ease-out;
 }
 
-.dialog-overlay[data-state='closed'] {
-  animation: dialog-overlay-out 150ms ease-in;
+.dialog-backdrop[data-closed] {
+  animation: dialog-backdrop-out 150ms ease-in;
 }
 
-.dialog-content[data-state='open'] {
+.dialog-content[data-open] {
   animation: dialog-content-in 100ms ease-out;
 }
 
-.dialog-content[data-state='closed'] {
+.dialog-content[data-closed] {
   animation: dialog-content-out 150ms ease-in;
-}
+}
diff --git a/packages/frappe-ui-react/src/components/dialog/dialog.stories.tsx b/packages/frappe-ui-react/src/components/dialog/dialog.stories.tsx
@@ -286,8 +286,8 @@ export const WithInteractiveComponents: Story = {
                 setAutocompleteValue(_value as AutocompleteOption)
               }
             />
-            <div className="space-y-3">
-              <label className="block text-sm font-medium text-gray-700">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-3">
                 Select an option:
               </label>
               <Dropdown options={dropdownOptions} placement="left">

diff --git a/packages/frappe-ui-react/src/components/dialog/dialog.tsx b/packages/frappe-ui-react/src/components/dialog/dialog.tsx
@@ -1,13 +1,5 @@
-import React, { useMemo } from "react";
-import {
-  Root,
-  Portal,
-  Overlay,
-  Content,
-  Close,
-  Description,
-  Title,
-} from "@radix-ui/react-dialog";
+import { useMemo } from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import clsx from "clsx";
 import { Button } from "../button";
@@ -34,12 +26,6 @@ const Dialog = ({
     actions = [],
   } = options;
 
-  const handleInteractOutside = (e: Event) => {
-    if (disableOutsideClickToClose) {
-      e.preventDefault();
-    }
-  };
-
   const closeDialog = () => onOpenChange(false);
 
   const icon = useMemo(() => {
@@ -100,20 +86,24 @@ const Dialog = ({
   }, [icon]);
 
   return (
-    <Root open={open} onOpenChange={onOpenChange}>
-      <Portal>
-        <Overlay
-          className="dialog-overlay fixed inset-0 bg-black-overlay-200 backdrop-filter backdrop-blur-[12px] overflow-y-auto z-[11]"
+    <BaseDialog.Root
+      open={open}
+      onOpenChange={onOpenChange}
+      disablePointerDismissal={disableOutsideClickToClose}
+    >
+      <BaseDialog.Portal>
+        <BaseDialog.Backdrop
+          className="dialog-backdrop fixed inset-0 bg-black-overlay-200 backdrop-filter backdrop-blur-[12px] overflow-y-auto z-[11]"
           data-dialog={"dialog"}
           onAnimationEnd={() => !open && onAfterLeave?.()}
         >
-          <div
+          <BaseDialog.Viewport
             className={clsx(
               "flex min-h-screen flex-col items-center px-4 py-4 text-center",
               dialogPositionClasses
             )}
           >
-            <Content
+            <BaseDialog.Popup
               className={clsx(
                 "dialog-content my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl",
                 {
@@ -130,8 +120,6 @@ const Dialog = ({
                   "max-w-xs": size === "xs",
                 }
               )}
-              onEscapeKeyDown={closeDialog}
-              onInteractOutside={handleInteractOutside}
             >
               <div className="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
                 <div className="flex">
@@ -152,41 +140,48 @@ const Dialog = ({
                             />
                           </div>
                         )}
-                        <Title asChild>
-                          {typeof title === "string" ? (
-                            <h3
-                              className="text-2xl font-semibold leading-6 text-ink-gray-9"
-                              data-testid="dialog-title"
-                            >
-                              {title || "Untitled"}
-                            </h3>
-                          ) : (
-                            title && title()
-                          )}
-                        </Title>
+                        <BaseDialog.Title
+                          render={
+                            typeof title === "string" || !title ? (
+                              <h3
+                                className="text-2xl font-semibold leading-6 text-ink-gray-9"
+                                data-testid="dialog-title"
+                              >
+                                {title || "Untitled"}
+                              </h3>
+                            ) : (
+                              title()
+                            )
+                          }
+                        />
                       </div>
-                      <Close asChild>
-                        <Button
-                          variant="ghost"
-                          onClick={closeDialog}
-                          data-testid="dialog-close"
-                        >
-                          <X className="h-4 w-4 text-ink-gray-9" />
-                        </Button>
-                      </Close>
+                      <BaseDialog.Close
+                        render={
+                          <Button
+                            variant="ghost"
+                            onClick={closeDialog}
+                            data-testid="dialog-close"
+                          >
+                            <X className="h-4 w-4 text-ink-gray-9" />
+                          </Button>
+                        }
+                        nativeButton={true}
+                      />
                     </div>
 
                     {children
                       ? children
                       : message && (
-                          <Description asChild>
-                            <p
-                              className="text-p-base text-ink-gray-7"
-                              data-testid="dialog-description"
-                            >
-                              {message}
-                            </p>
-                          </Description>
+                          <BaseDialog.Description
+                            render={
+                              <p
+                                className="text-p-base text-ink-gray-7"
+                                data-testid="dialog-description"
+                              >
+                                {message}
+                              </p>
+                            }
+                          />
                         )}
                   </div>
                 </div>
@@ -209,11 +204,11 @@ const Dialog = ({
                   )}
                 </div>
               )}
-            </Content>
-          </div>
-        </Overlay>
-      </Portal>
-    </Root>
+            </BaseDialog.Popup>
+          </BaseDialog.Viewport>
+        </BaseDialog.Backdrop>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
   );
 };
 

diff --git a/packages/frappe-ui-react/src/components/dialog/types.ts b/packages/frappe-ui-react/src/components/dialog/types.ts
@@ -15,7 +15,7 @@ export interface DialogActionButtonProps {
 }
 
 export interface DialogOptions {
-  title?: (() => React.ReactNode) | string;
+  title?: (() => React.ReactElement) | string;
   message?: string;
   size?:
     | "xs"