diff --git a/package.json b/package.json
index 08e34ad9..f8225af7 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
     "@bedframe/cli": "^0.0.91",
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@types/mime-types": "^2.1.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "cross-env": "^7.0.3",
     "dependency-cruiser": "^16.10.0",
     "eslint": "9.22.0",
diff --git a/src/interface/components/utils/ReactAdapter.svelte b/src/interface/components/utils/ReactAdapter.svelte
new file mode 100644
index 00000000..2a7de2fc
--- /dev/null
+++ b/src/interface/components/utils/ReactAdapter.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import React from "react";
+  import ReactDOM from "react-dom";
+  import { onDestroy, onMount } from "svelte";
+
+  const e = React.createElement;
+  let container: HTMLDivElement;
+
+  onMount(() => {
+    const { el, children, class: _, ...props } = $$props;
+    try {
+      ReactDOM.render(e(el, props, children), container);
+    } catch (err) {
+      console.warn(`react-adapter failed to mount.`, { err });
+    }
+  });
+
+  onDestroy(() => {
+    try {
+      ReactDOM.unmountComponentAtNode(container);
+    } catch (err) {
+      console.warn(`react-adapter failed to unmount.`, { err });
+    }
+  });
+</script>
+
+<div bind:this={container} class={$$props.class}></div>
\ No newline at end of file