diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
new file mode 100644
index 000000000..718bc23a2
--- /dev/null
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -0,0 +1,11 @@
+export default function Modal({ children }) {
+    return (
+        <div className="modal fade mx-auto" tabIndex={-1} role="dialog">
+            <div className="modal-dialog" role="document">
+                <div className="modal-content">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/ReactBasicWidget.ts b/apps/client/src/widgets/react/ReactBasicWidget.ts
new file mode 100644
index 000000000..c55564857
--- /dev/null
+++ b/apps/client/src/widgets/react/ReactBasicWidget.ts
@@ -0,0 +1,14 @@
+import { JSX, render } from "preact";
+import BasicWidget from "../basic_widget.js";
+
+export default abstract class ReactBasicWidget extends BasicWidget {
+
+    abstract get component(): JSX.Element;
+
+    doRender() {
+        const renderContainer = new DocumentFragment();
+        render(this.component, renderContainer);
+        this.$widget = $(renderContainer.firstChild as HTMLElement);
+    }
+
+}