diff --git a/packages/ui/src/common/index.ts b/packages/ui/src/common/index.ts
index ee4ffb09c0ef..e514b9d2a50a 100644
--- a/packages/ui/src/common/index.ts
+++ b/packages/ui/src/common/index.ts
@@ -16,3 +16,4 @@
 
 export * from './component-manager';
 export * from './z-index-manager';
+export * from "./teleport";
diff --git a/packages/ui/src/common/teleport.ts b/packages/ui/src/common/teleport.ts
new file mode 100644
index 000000000000..2b89770baf91
--- /dev/null
+++ b/packages/ui/src/common/teleport.ts
@@ -0,0 +1,43 @@
+import { Fragment, reactive, Teleport, markRaw, defineComponent, h } from "vue";
+
+let active = false;
+const items = reactive<{ [key: string]: any }>({});
+
+export function connect(
+    id: string | number,
+    component: any,
+    container: HTMLDivElement,
+    props: Record<string, any>
+) {
+    if (active) {
+        items[id] = markRaw(
+            defineComponent({
+                render: () =>
+                    h(Teleport, { to: container } as any, [
+                        h(component, props),
+                    ]),
+            })
+        );
+    }
+}
+
+export function disconnect(id: string | number) {
+    if (active) {
+        delete items[id];
+    }
+}
+
+export function getTeleport(): any {
+    active = true;
+
+    return defineComponent({
+        setup() {
+            return () =>
+                h(
+                    Fragment,
+                    {},
+                    Object.keys(items).map((id) => h(items[id]))
+                );
+        },
+    });
+}