diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index 64e0c0d08..fece6efd0 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -196,8 +196,8 @@ export default class DesktopLayout {
             .child(new CloseZenButton())
 
             // Desktop-specific dialogs.
-            .child(new PasswordNoteSetDialog())
-            .child(new UploadAttachmentsDialog());
+            .child(<PasswordNoteSetDialog />)
+            .child(<UploadAttachmentsDialog />);
 
         applyModals(rootContainer);
         return rootContainer;
diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx
index 0239e7db0..8468b47f7 100644
--- a/apps/client/src/layouts/layout_commons.tsx
+++ b/apps/client/src/layouts/layout_commons.tsx
@@ -28,33 +28,33 @@ import NoteIconWidget from "../widgets/note_icon";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteListWidget from "../widgets/note_list.js";
-import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx";
+import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
-        .child(new BulkActionsDialog())
-        .child(new AboutDialog())
-        .child(new HelpDialog())
-        .child(new RecentChangesDialog())
-        .child(new BranchPrefixDialog())
-        .child(new SortChildNotesDialog())
-        .child(new IncludeNoteDialog())
-        .child(new NoteTypeChooserDialog())
-        .child(new JumpToNoteDialog())
-        .child(new AddLinkDialog())
-        .child(new CloneToDialog())
-        .child(new MoveToDialog())
-        .child(new ImportDialog())
-        .child(new ExportDialog())
-        .child(new MarkdownImportDialog())
-        .child(new ProtectedSessionPasswordDialog())
-        .child(new RevisionsDialog())
-        .child(new DeleteNotesDialog())
-        .child(new InfoDialog())
-        .child(new ConfirmDialog())
-        .child(new PromptDialog())
-        .child(new IncorrectCpuArchDialog())
+        .child(<BulkActionsDialog />)
+        .child(<AboutDialog />)
+        .child(<HelpDialog />)
+        .child(<RecentChangesDialog />)
+        .child(<BranchPrefixDialog />)
+        .child(<SortChildNotesDialog />)
+        .child(<IncludeNoteDialog />)
+        .child(<NoteTypeChooserDialog />)
+        .child(<JumpToNoteDialog />)
+        .child(<AddLinkDialog />)
+        .child(<CloneToDialog />)
+        .child(<MoveToDialog />)
+        .child(<ImportDialog />)
+        .child(<ExportDialog />)
+        .child(<MarkdownImportDialog />)
+        .child(<ProtectedSessionPasswordDialog />)
+        .child(<RevisionsDialog />)
+        .child(<DeleteNotesDialog />)
+        .child(<InfoDialog />)
+        .child(<ConfirmDialog />)
+        .child(<PromptDialog />)
+        .child(<IncorrectCpuArchDialog />)
         .child(new PopupEditorDialog()
                 .child(new FlexContainer("row")
                     .class("title-row")
@@ -66,5 +66,5 @@ export function applyModals(rootContainer: RootContainer) {
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
                 .child(new NoteListWidget(true)))
-        .child(new CallToActionDialog());
+        .child(<CallToActionDialog />);
 }
diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index 2b49add70..ec12de3ab 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import Modal from "../react/Modal.js";
 import { t } from "../../services/i18n.js";
 import { formatDateTime } from "../../utils/formatters.js";
@@ -8,14 +7,14 @@ import openService from "../../services/open.js";
 import { useState } from "preact/hooks";
 import type { CSSProperties } from "preact/compat";
 import type { AppInfo } from "@triliumnext/commons";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEventBeta } from "../react/hooks.jsx";
 
-function AboutDialogComponent() {
+export default function AboutDialog() {
     let [appInfo, setAppInfo] = useState<AppInfo | null>(null);
     let [shown, setShown] = useState(false);
     const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
 
-    useTriliumEvent("openAboutDialog", () => setShown(true));
+    useTriliumEventBeta("openAboutDialog", () => setShown(true));
 
     return (
         <Modal className="about-dialog"
@@ -82,11 +81,3 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
         return <span style={style}>{directory}</span>;
     }
 }
-
-export default class AboutDialog extends ReactBasicWidget {
-
-    get component() {
-        return <AboutDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/add_link.tsx b/apps/client/src/widgets/dialogs/add_link.tsx
index e20e5a80e..682015b0f 100644
--- a/apps/client/src/widgets/dialogs/add_link.tsx
+++ b/apps/client/src/widgets/dialogs/add_link.tsx
@@ -11,11 +11,11 @@ import { default as TextTypeWidget } from "../type_widgets/editable_text.js";
 import { logError } from "../../services/ws";
 import FormGroup from "../react/FormGroup.js";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
-function AddLinkDialogComponent() {
+export default function AddLinkDialog() {
     const [ textTypeWidget, setTextTypeWidget ] = useState<TextTypeWidget>();
     const initialText = useRef<string>();
     const [ linkTitle, setLinkTitle ] = useState("");
@@ -24,7 +24,7 @@ function AddLinkDialogComponent() {
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showAddLinkDialog", ( { textTypeWidget, text }) => {
+    useTriliumEventBeta("showAddLinkDialog", ( { textTypeWidget, text }) => {
         setTextTypeWidget(textTypeWidget);
         initialText.current = text;
         setShown(true);
@@ -152,11 +152,3 @@ function AddLinkDialogComponent() {
         </Modal>
     );
 }
-
-export default class AddLinkDialog extends ReactBasicWidget {
-    
-    get component() {
-        return <AddLinkDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/branch_prefix.tsx b/apps/client/src/widgets/dialogs/branch_prefix.tsx
index f73feb125..849988ad8 100644
--- a/apps/client/src/widgets/dialogs/branch_prefix.tsx
+++ b/apps/client/src/widgets/dialogs/branch_prefix.tsx
@@ -4,21 +4,20 @@ import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import toast from "../../services/toast.js";
 import Modal from "../react/Modal.jsx";
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import froca from "../../services/froca.js";
 import tree from "../../services/tree.js";
 import Button from "../react/Button.jsx";
 import FormGroup from "../react/FormGroup.js";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEventBeta } from "../react/hooks.jsx";
 import FBranch from "../../entities/fbranch.js";
 
-function BranchPrefixDialogComponent() {
+export default function BranchPrefixDialog() {
     const [ shown, setShown ] = useState(false);
     const [ branch, setBranch ] = useState<FBranch>();
     const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
     const branchInput = useRef<HTMLInputElement>(null);
 
-    useTriliumEvent("editBranchPrefix", async () => {
+    useTriliumEventBeta("editBranchPrefix", async () => {
         const notePath = appContext.tabManager.getActiveContextNotePath();
         if (!notePath) {
             return;
@@ -75,14 +74,6 @@ function BranchPrefixDialogComponent() {
     );
 }
 
-export default class BranchPrefixDialog extends ReactBasicWidget {
-
-    get component() {
-        return <BranchPrefixDialogComponent />;
-    }
-
-}
-
 async function savePrefix(branchId: string, prefix: string) {
     await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix });
     toast.showMessage(t("branch_prefix.branch_prefix_saved"));
diff --git a/apps/client/src/widgets/dialogs/bulk_actions.tsx b/apps/client/src/widgets/dialogs/bulk_actions.tsx
index 8d184433f..25b490218 100644
--- a/apps/client/src/widgets/dialogs/bulk_actions.tsx
+++ b/apps/client/src/widgets/dialogs/bulk_actions.tsx
@@ -12,9 +12,9 @@ import toast from "../../services/toast";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function BulkActionComponent() {
+export default function BulkActionsDialog() {
     const [ selectedOrActiveNoteIds, setSelectedOrActiveNoteIds ] = useState<string[]>();
     const [ bulkActionNote, setBulkActionNote ] = useState<FNote | null>();
     const [ includeDescendants, setIncludeDescendants ] = useState(false);
@@ -22,7 +22,7 @@ function BulkActionComponent() {
     const [ existingActions, setExistingActions ] = useState<RenameNoteBulkAction[]>([]);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("openBulkActionsDialog", async ({ selectedOrActiveNoteIds }) => {
+    useTriliumEventBeta("openBulkActionsDialog", async ({ selectedOrActiveNoteIds }) => {
         setSelectedOrActiveNoteIds(selectedOrActiveNoteIds);
         setBulkActionNote(await froca.getNote("_bulkAction"));
         setShown(true);
@@ -46,12 +46,12 @@ function BulkActionComponent() {
         refreshExistingActions();
     }, [refreshExistingActions]);
     
-    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+    useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => {
         if (loadResults.getAttributeRows().find((row) =>
             row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) {
                 refreshExistingActions();
         }
-    }, shown);
+    });
 
     return (
         <Modal
@@ -117,11 +117,3 @@ function ExistingActionsList({ existingActions }: { existingActions?: RenameNote
         </table>
     );
 }
-
-export default class BulkActionsDialog extends ReactBasicWidget {
-
-    get component() {
-        return <BulkActionComponent />
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx
index d493611e3..9b4668856 100644
--- a/apps/client/src/widgets/dialogs/call_to_action.tsx
+++ b/apps/client/src/widgets/dialogs/call_to_action.tsx
@@ -1,11 +1,12 @@
-import { useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
-import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
+import { dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
 import { t } from "../../services/i18n";
 
-function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
+export default function CallToActionDialog() {
+    const activeCallToActions = useMemo(() => getCallToActions(), []);
+    
     if (!activeCallToActions.length) {
         return <></>;
     }
@@ -48,11 +49,3 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
         </Modal>
     )
 }
-
-export class CallToActionDialog extends ReactBasicWidget {
-
-    get component() {
-        return <CallToActionDialogComponent activeCallToActions={getCallToActions()} /> 
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/clone_to.tsx b/apps/client/src/widgets/dialogs/clone_to.tsx
index 173169858..f6e538b0b 100644
--- a/apps/client/src/widgets/dialogs/clone_to.tsx
+++ b/apps/client/src/widgets/dialogs/clone_to.tsx
@@ -2,7 +2,6 @@ import { useRef, useState } from "preact/hooks";
 import appContext from "../../components/app_context";
 import { t } from "../../services/i18n";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import froca from "../../services/froca";
 import FormGroup from "../react/FormGroup";
@@ -14,16 +13,16 @@ import tree from "../../services/tree";
 import branches from "../../services/branches";
 import toast from "../../services/toast";
 import NoteList from "../react/NoteList";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function CloneToDialogComponent() {
+export default function CloneToDialog() {
     const [ clonedNoteIds, setClonedNoteIds ] = useState<string[]>();
     const [ prefix, setPrefix ] = useState("");
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
     const autoCompleteRef = useRef<HTMLInputElement>(null);
 
-    useTriliumEvent("cloneNoteIdsTo", ({ noteIds }) => {
+    useTriliumEventBeta("cloneNoteIdsTo", ({ noteIds }) => {
         if (!noteIds || noteIds.length === 0) {
             noteIds = [appContext.tabManager.getActiveContextNoteId() ?? ""];
         }
@@ -83,14 +82,6 @@ function CloneToDialogComponent() {
     )
 }
 
-export default class CloneToDialog extends ReactBasicWidget {
-
-    get component() {
-        return <CloneToDialogComponent />;
-    }
-
-}
-
 async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?: string) {
     const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
     if (!noteId || !parentNoteId) {
diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx
index a4ab173fd..6e83bebff 100644
--- a/apps/client/src/widgets/dialogs/confirm.tsx
+++ b/apps/client/src/widgets/dialogs/confirm.tsx
@@ -1,10 +1,9 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import Button from "../react/Button";
 import { t } from "../../services/i18n";
 import { useState } from "preact/hooks";
 import FormCheckbox from "../react/FormCheckbox";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 interface ConfirmDialogProps {
     title?: string;
@@ -13,7 +12,7 @@ interface ConfirmDialogProps {
     isConfirmDeleteNoteBox?: boolean;   
 }
 
-function ConfirmDialogComponent() {
+export default function ConfirmDialog() {
     const [ opts, setOpts ] = useState<ConfirmDialogProps>();
     const [ isDeleteNoteChecked, setIsDeleteNoteChecked ] = useState(false);
     const [ shown, setShown ] = useState(false);
@@ -28,8 +27,8 @@ function ConfirmDialogComponent() {
         setShown(true);
     }
 
-    useTriliumEvent("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
-    useTriliumEvent("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
+    useTriliumEventBeta("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
+    useTriliumEventBeta("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
 
     return ( 
         <Modal
@@ -92,11 +91,3 @@ export interface ConfirmWithTitleOptions {
     title: string;
     callback: ConfirmDialogCallback;
 }
-
-export default class ConfirmDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ConfirmDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/delete_notes.tsx b/apps/client/src/widgets/dialogs/delete_notes.tsx
index 54afbb752..ca4143e68 100644
--- a/apps/client/src/widgets/dialogs/delete_notes.tsx
+++ b/apps/client/src/widgets/dialogs/delete_notes.tsx
@@ -10,7 +10,7 @@ import FNote from "../../entities/fnote.js";
 import link from "../../services/link.js";
 import Button from "../react/Button.jsx";
 import Alert from "../react/Alert.jsx";
-import useTriliumEvent from "../react/hooks.jsx";
+import useTriliumEvent, { useTriliumEventBeta } from "../react/hooks.jsx";
 
 export interface ResolveOptions {
     proceed: boolean;
@@ -30,7 +30,7 @@ interface BrokenRelationData {
     source: string;
 }
 
-function DeleteNotesDialogComponent() {
+export default function DeleteNotesDialog() {
     const [ opts, setOpts ] = useState<ShowDeleteNotesDialogOpts>({});
     const [ deleteAllClones, setDeleteAllClones ] = useState(false);
     const [ eraseNotes, setEraseNotes ] = useState(!!opts.forceDeleteAllClones);
@@ -39,7 +39,7 @@ function DeleteNotesDialogComponent() {
     const [ shown, setShown ] = useState(false);
     const okButtonRef = useRef<HTMLButtonElement>(null);
 
-    useTriliumEvent("showDeleteNotesDialog", (opts) => {
+    useTriliumEventBeta("showDeleteNotesDialog", (opts) => {
         setOpts(opts);
         setShown(true);
     })
@@ -171,11 +171,3 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
         return <></>;
     }
 }
-
-export default class DeleteNotesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <DeleteNotesDialogComponent />;
-    }    
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/export.tsx b/apps/client/src/widgets/dialogs/export.tsx
index 3543e3b35..26ca4d537 100644
--- a/apps/client/src/widgets/dialogs/export.tsx
+++ b/apps/client/src/widgets/dialogs/export.tsx
@@ -11,7 +11,7 @@ import toastService, { ToastOptions } from "../../services/toast";
 import utils from "../../services/utils";
 import open from "../../services/open";
 import froca from "../../services/froca";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 interface ExportDialogProps {
     branchId?: string | null;
@@ -19,7 +19,7 @@ interface ExportDialogProps {
     defaultType?: "subtree" | "single";
 }
 
-function ExportDialogComponent() {
+export default function ExportDialog() {
     const [ opts, setOpts ] = useState<ExportDialogProps>();
     const [ exportType, setExportType ] = useState<string>(opts?.defaultType ?? "subtree");
     const [ subtreeFormat, setSubtreeFormat ] = useState("html");
@@ -27,7 +27,7 @@ function ExportDialogComponent() {
     const [ opmlVersion, setOpmlVersion ] = useState("2.0");
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showExportDialog", async ({ notePath, defaultType }) => {
+    useTriliumEventBeta("showExportDialog", async ({ notePath, defaultType }) => {
         const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
         if (!parentNoteId) {
             return;
@@ -125,14 +125,6 @@ function ExportDialogComponent() {
     );
 }
 
-export default class ExportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ExportDialogComponent />
-    }    
-
-}
-
 function exportBranch(branchId: string, type: string, format: string, version: string) {
     const taskId = utils.randomString(10);
     const url = open.getUrlForDownload(`api/branches/${branchId}/export/${type}/${format}/${version}/${taskId}`);
diff --git a/apps/client/src/widgets/dialogs/help.tsx b/apps/client/src/widgets/dialogs/help.tsx
index e4b72750d..474b70745 100644
--- a/apps/client/src/widgets/dialogs/help.tsx
+++ b/apps/client/src/widgets/dialogs/help.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import Modal from "../react/Modal.jsx";
 import { t } from "../../services/i18n.js";
 import { ComponentChildren } from "preact";
@@ -6,11 +5,11 @@ import { CommandNames } from "../../components/app_context.js";
 import RawHtml from "../react/RawHtml.jsx";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions.js";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEventBeta } from "../react/hooks.jsx";
 
-function HelpDialogComponent() {
+export default function HelpDialog() {
     const [ shown, setShown ] = useState(false);
-    useTriliumEvent("showCheatsheet", () => setShown(true));
+    useTriliumEventBeta("showCheatsheet", () => setShown(true));
 
     return (
         <Modal
@@ -161,11 +160,3 @@ function Card({ title, children }: { title: string, children: ComponentChildren
         </div>
     )
 }
-
-export default class HelpDialog extends ReactBasicWidget {
-    
-    get component() {
-        return <HelpDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/import.tsx b/apps/client/src/widgets/dialogs/import.tsx
index df648b7fb..dc0a774fc 100644
--- a/apps/client/src/widgets/dialogs/import.tsx
+++ b/apps/client/src/widgets/dialogs/import.tsx
@@ -9,9 +9,9 @@ import Modal from "../react/Modal";
 import RawHtml from "../react/RawHtml";
 import ReactBasicWidget from "../react/ReactBasicWidget";
 import importService, { UploadFilesOptions } from "../../services/import";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function ImportDialogComponent() {
+export default function ImportDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ noteTitle, setNoteTitle ] = useState<string>();
     const [ files, setFiles ] = useState<FileList | null>(null);
@@ -23,7 +23,7 @@ function ImportDialogComponent() {
     const [ replaceUnderscoresWithSpaces, setReplaceUnderscoresWithSpaces ] = useState(true);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showImportDialog", ({ noteId }) => {
+    useTriliumEventBeta("showImportDialog", ({ noteId }) => {
         setParentNoteId(noteId);
         tree.getNoteTitle(noteId).then(setNoteTitle);
         setShown(true);
@@ -89,14 +89,6 @@ function ImportDialogComponent() {
     );
 }
 
-export default class ImportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ImportDialogComponent />
-    }    
-
-}
-
 function boolToString(value: boolean) {
     return value ? "true" : "false";
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/include_note.tsx b/apps/client/src/widgets/dialogs/include_note.tsx
index 234fc7646..49c650521 100644
--- a/apps/client/src/widgets/dialogs/include_note.tsx
+++ b/apps/client/src/widgets/dialogs/include_note.tsx
@@ -4,7 +4,6 @@ import FormGroup from "../react/FormGroup";
 import FormRadioGroup from "../react/FormRadioGroup";
 import Modal from "../react/Modal";
 import NoteAutocomplete from "../react/NoteAutocomplete";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
 import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import tree from "../../services/tree";
@@ -12,7 +11,7 @@ import froca from "../../services/froca";
 import EditableTextTypeWidget from "../type_widgets/editable_text";
 import useTriliumEvent from "../react/hooks";
 
-function IncludeNoteDialogComponent() {
+export default function IncludeNoteDialog() {
     const [textTypeWidget, setTextTypeWidget] = useState<EditableTextTypeWidget>();
     const [suggestion, setSuggestion] = useState<Suggestion | null>(null);
     const [boxSize, setBoxSize] = useState("medium");
@@ -70,14 +69,6 @@ function IncludeNoteDialogComponent() {
     )
 }
 
-export default class IncludeNoteDialog extends ReactBasicWidget {
-
-    get component() {
-        return <IncludeNoteDialogComponent />;
-    }    
-
-}
-
 async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWidget) {
     const noteId = tree.getNoteIdFromUrl(notePath);
     if (!noteId) {
diff --git a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
index e0165b7d0..112d7efc8 100644
--- a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
+++ b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
@@ -3,14 +3,13 @@ import { t } from "../../services/i18n.js";
 import utils from "../../services/utils.js";
 import Button from "../react/Button.js";
 import Modal from "../react/Modal.js";
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import { useState } from "preact/hooks";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEventBeta } from "../react/hooks.jsx";
 
-function IncorrectCpuArchDialogComponent() {
+export default function IncorrectCpuArchDialogComponent() {
     const [ shown, setShown ] = useState(false);
     const downloadButtonRef = useRef<HTMLButtonElement>(null);
-    useTriliumEvent("showCpuArchWarning", () => setShown(true));
+    useTriliumEventBeta("showCpuArchWarning", () => setShown(true));
 
     return (
         <Modal
@@ -44,11 +43,3 @@ function IncorrectCpuArchDialogComponent() {
         </Modal>
     )
 }
-
-export default class IncorrectCpuArchDialog extends ReactBasicWidget {
- 
-    get component() {
-        return <IncorrectCpuArchDialogComponent />
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/info.tsx b/apps/client/src/widgets/dialogs/info.tsx
index 9eaf81b50..9f9907fbf 100644
--- a/apps/client/src/widgets/dialogs/info.tsx
+++ b/apps/client/src/widgets/dialogs/info.tsx
@@ -1,18 +1,17 @@
 import { EventData } from "../../components/app_context";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import { useRef, useState } from "preact/hooks";
 import { RawHtmlBlock } from "../react/RawHtml";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function ShowInfoDialogComponent() {
+export default function InfoDialog() {
     const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
     const [ shown, setShown ] = useState(false);
     const okButtonRef = useRef<HTMLButtonElement>(null);
 
-    useTriliumEvent("showInfoDialog", (opts) => {
+    useTriliumEventBeta("showInfoDialog", (opts) => {
         setOpts(opts);
         setShown(true);
     });
@@ -37,11 +36,3 @@ function ShowInfoDialogComponent() {
         <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
     </Modal>);
 }
-
-export default class InfoDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ShowInfoDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/jump_to_note.tsx b/apps/client/src/widgets/dialogs/jump_to_note.tsx
index 3af1b1aba..20d0c3e2e 100644
--- a/apps/client/src/widgets/dialogs/jump_to_note.tsx
+++ b/apps/client/src/widgets/dialogs/jump_to_note.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import Button from "../react/Button";
 import NoteAutocomplete from "../react/NoteAutocomplete";
@@ -8,13 +7,13 @@ import note_autocomplete, { Suggestion } from "../../services/note_autocomplete"
 import appContext from "../../components/app_context";
 import commandRegistry from "../../services/command_registry";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
 
 type Mode = "last-search" | "recent-notes" | "commands";
 
-function JumpToNoteDialogComponent() {
+export default function JumpToNoteDialogComponent() {
     const [ mode, setMode ] = useState<Mode>();
     const [ lastOpenedTs, setLastOpenedTs ] = useState<number>(0);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -51,8 +50,8 @@ function JumpToNoteDialogComponent() {
         setLastOpenedTs(Date.now());
     }
 
-    useTriliumEvent("jumpToNote", () => openDialog(false));
-    useTriliumEvent("commandPalette", () => openDialog(true));
+    useTriliumEventBeta("jumpToNote", () => openDialog(false));
+    useTriliumEventBeta("commandPalette", () => openDialog(true));
 
     async function onItemSelected(suggestion?: Suggestion | null) {
         if (!suggestion) {
@@ -115,11 +114,3 @@ function JumpToNoteDialogComponent() {
         </Modal>
     );
 }
-
-export default class JumpToNoteDialog extends ReactBasicWidget {
-
-    get component() {
-        return <JumpToNoteDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/markdown_import.tsx b/apps/client/src/widgets/dialogs/markdown_import.tsx
index 4f91278d9..8049e98da 100644
--- a/apps/client/src/widgets/dialogs/markdown_import.tsx
+++ b/apps/client/src/widgets/dialogs/markdown_import.tsx
@@ -5,15 +5,14 @@ import server from "../../services/server";
 import toast from "../../services/toast";
 import utils from "../../services/utils";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 interface RenderMarkdownResponse {
     htmlContent: string;
 }
 
-function MarkdownImportDialogComponent() {
+export default function MarkdownImportDialog() {
     const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
     let [ text, setText ] = useState("");
     let [ shown, setShown ] = useState(false);
@@ -33,8 +32,8 @@ function MarkdownImportDialogComponent() {
         }
     }, []);
 
-    useTriliumEvent("importMarkdownInline", triggerImport);
-    useTriliumEvent("pasteMarkdownIntoText", triggerImport);
+    useTriliumEventBeta("importMarkdownInline", triggerImport);
+    useTriliumEventBeta("pasteMarkdownIntoText", triggerImport);
 
     async function sendForm() {
         await convertMarkdownToHtml(text);
@@ -64,14 +63,6 @@ function MarkdownImportDialogComponent() {
     )
 }
 
-export default class MarkdownImportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <MarkdownImportDialogComponent />;
-    }
-
-}
-
 async function convertMarkdownToHtml(markdownContent: string) {
     const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
 
diff --git a/apps/client/src/widgets/dialogs/move_to.tsx b/apps/client/src/widgets/dialogs/move_to.tsx
index c80ffc0d0..92cd20c37 100644
--- a/apps/client/src/widgets/dialogs/move_to.tsx
+++ b/apps/client/src/widgets/dialogs/move_to.tsx
@@ -11,15 +11,15 @@ import tree from "../../services/tree";
 import froca from "../../services/froca";
 import branches from "../../services/branches";
 import toast from "../../services/toast";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function MoveToDialogComponent() {
+export default function MoveToDialog() {
     const [ movedBranchIds, setMovedBranchIds ] = useState<string[]>();
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
     const autoCompleteRef = useRef<HTMLInputElement>(null);
 
-    useTriliumEvent("moveBranchIdsTo", ({ branchIds }) => {
+    useTriliumEventBeta("moveBranchIdsTo", ({ branchIds }) => {
         setMovedBranchIds(branchIds);
         setShown(true);
     });
@@ -67,14 +67,6 @@ function MoveToDialogComponent() {
     )
 }
 
-export default class MoveToDialog extends ReactBasicWidget {
-
-    get component() {
-        return <MoveToDialogComponent />;
-    }
-
-}
-
 async function moveNotesTo(movedBranchIds: string[] | undefined, parentBranchId: string) {
     if (movedBranchIds) {
         await branches.moveToParentNote(movedBranchIds, parentBranchId);
diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.tsx b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
index 993ffc6ef..70cf9a7d8 100644
--- a/apps/client/src/widgets/dialogs/note_type_chooser.tsx
+++ b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import FormGroup from "../react/FormGroup";
@@ -10,7 +9,7 @@ import { MenuCommandItem, MenuItem } from "../../menus/context_menu";
 import { TreeCommandNames } from "../../menus/tree_context_menu";
 import { Suggestion } from "../../services/note_autocomplete";
 import Badge from "../react/Badge";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 export interface ChooseNoteTypeResponse {
     success: boolean;
@@ -26,13 +25,13 @@ const SEPARATOR_TITLE_REPLACEMENTS = [
     t("note_type_chooser.templates")
 ];
 
-function NoteTypeChooserDialogComponent() {
+export default function NoteTypeChooserDialogComponent() {
     const [ callback, setCallback ] = useState<ChooseNoteTypeCallback>();
     const [ shown, setShown ] = useState(false);
     const [ parentNote, setParentNote ] = useState<Suggestion | null>(); 
     const [ noteTypes, setNoteTypes ] = useState<MenuItem<TreeCommandNames>[]>([]);    
 
-    useTriliumEvent("chooseNoteType", ({ callback }) => {
+    useTriliumEventBeta("chooseNoteType", ({ callback }) => {
         setCallback(() => callback);
         setShown(true);
     });
@@ -120,11 +119,3 @@ function NoteTypeChooserDialogComponent() {
         </Modal>
     );
 }
-
-export default class NoteTypeChooserDialog extends ReactBasicWidget {
-
-    get component() {
-        return <NoteTypeChooserDialogComponent />
-    }    
-
-}
diff --git a/apps/client/src/widgets/dialogs/password_not_set.tsx b/apps/client/src/widgets/dialogs/password_not_set.tsx
index 79aaa4fc8..bc225f798 100644
--- a/apps/client/src/widgets/dialogs/password_not_set.tsx
+++ b/apps/client/src/widgets/dialogs/password_not_set.tsx
@@ -1,14 +1,13 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import appContext from "../../components/app_context";
 import { useState } from "preact/hooks";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function PasswordNotSetDialogComponent() {
+export default function PasswordNotSetDialog() {
     const [ shown, setShown ] = useState(false);
-    useTriliumEvent("showPasswordNotSet", () => setShown(true));
+    useTriliumEventBeta("showPasswordNotSet", () => setShown(true));
 
     return (
         <Modal
@@ -27,10 +26,3 @@ function PasswordNotSetDialogComponent() {
     );
 }
 
-export default class PasswordNotSetDialog extends ReactBasicWidget {
-
-    get component() {
-        return <PasswordNotSetDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/prompt.tsx b/apps/client/src/widgets/dialogs/prompt.tsx
index 8af41ef44..baf62ec3f 100644
--- a/apps/client/src/widgets/dialogs/prompt.tsx
+++ b/apps/client/src/widgets/dialogs/prompt.tsx
@@ -2,12 +2,10 @@ import { useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import { Modal as BootstrapModal } from "bootstrap";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import FormTextBox from "../react/FormTextBox";
 import FormGroup from "../react/FormGroup";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -28,7 +26,7 @@ export interface PromptDialogOptions {
     readOnly?: boolean;
 }
 
-function PromptDialogComponent() {    
+export default function PromptDialog() {    
     const modalRef = useRef<HTMLDivElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
     const labelRef = useRef<HTMLLabelElement>(null);
@@ -38,7 +36,7 @@ function PromptDialogComponent() {
     const [ shown, setShown ] = useState(false);
     const submitValue = useRef<string>(null);
     
-    useTriliumEvent("showPromptDialog", (newOpts) => {
+    useTriliumEventBeta("showPromptDialog", (newOpts) => {
         opts.current = newOpts;
         setValue(newOpts.defaultValue ?? "");
         setShown(true);
@@ -84,11 +82,3 @@ function PromptDialogComponent() {
         </Modal>
     );
 }
-
-export default class PromptDialog extends ReactBasicWidget {
-
-    get component() {
-        return <PromptDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/protected_session_password.tsx b/apps/client/src/widgets/dialogs/protected_session_password.tsx
index 137b0b0d4..afbd4fdff 100644
--- a/apps/client/src/widgets/dialogs/protected_session_password.tsx
+++ b/apps/client/src/widgets/dialogs/protected_session_password.tsx
@@ -3,17 +3,16 @@ import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import FormTextBox from "../react/FormTextBox";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import protected_session from "../../services/protected_session";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function ProtectedSessionPasswordDialogComponent() {
+export default function ProtectedSessionPasswordDialog() {
     const [ shown, setShown ] = useState(false);
     const [ password, setPassword ] = useState("");
     const inputRef = useRef<HTMLInputElement>(null);
 
-    useTriliumEvent("showProtectedSessionPasswordDialog", () => setShown(true));
-    useTriliumEvent("closeProtectedSessionPasswordDialog", () => setShown(false));
+    useTriliumEventBeta("showProtectedSessionPasswordDialog", () => setShown(true));
+    useTriliumEventBeta("closeProtectedSessionPasswordDialog", () => setShown(false));
 
     return (
         <Modal
@@ -38,11 +37,3 @@ function ProtectedSessionPasswordDialogComponent() {
         </Modal>
     )
 }
-
-export default class ProtectedSessionPasswordDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ProtectedSessionPasswordDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/recent_changes.tsx b/apps/client/src/widgets/dialogs/recent_changes.tsx
index 264d2f15d..4c708519c 100644
--- a/apps/client/src/widgets/dialogs/recent_changes.tsx
+++ b/apps/client/src/widgets/dialogs/recent_changes.tsx
@@ -6,7 +6,6 @@ import server from "../../services/server";
 import toast from "../../services/toast";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import hoisted_note from "../../services/hoisted_note";
 import type { RecentChangeRow } from "@triliumnext/commons";
 import froca from "../../services/froca";
@@ -14,15 +13,15 @@ import { formatDateTime } from "../../utils/formatters";
 import link from "../../services/link";
 import RawHtml from "../react/RawHtml";
 import ws from "../../services/ws";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function RecentChangesDialogComponent() {
+export default function RecentChangesDialog() {
     const [ ancestorNoteId, setAncestorNoteId ] = useState<string>();
     const [ groupedByDate, setGroupedByDate ] = useState<Map<String, RecentChangeRow[]>>();
     const [ needsRefresh, setNeedsRefresh ] = useState(false);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showRecentChanges", ({ ancestorNoteId }) => {
+    useTriliumEventBeta("showRecentChanges", ({ ancestorNoteId }) => {
         setNeedsRefresh(true);
         setAncestorNoteId(ancestorNoteId ?? hoisted_note.getHoistedNoteId());
         setShown(true);
@@ -156,14 +155,6 @@ function DeletedNoteLink({ change, setShown }: { change: RecentChangeRow, setSho
     );
 }
 
-export default class RecentChangesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <RecentChangesDialogComponent />
-    }
-
-}
-
 function groupByDate(rows: RecentChangeRow[]) {
     const groupedByDate = new Map<String, RecentChangeRow[]>();
 
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index 4d6377bba..77d019814 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -20,7 +20,7 @@ import ActionButton from "../react/ActionButton";
 import options from "../../services/options";
 import useTriliumEvent from "../react/hooks";
 
-function RevisionsDialogComponent() {
+export default function RevisionsDialog() {
     const [ note, setNote ] = useState<FNote>();
     const [ revisions, setRevisions ] = useState<RevisionItem[]>();
     const [ currentRevision, setCurrentRevision ] = useState<RevisionItem>();
@@ -291,14 +291,6 @@ function RevisionFooter({ note }: { note?: FNote }) {
     </>;
 }
 
-export default class RevisionsDialog extends ReactBasicWidget  {
-
-    get component() {
-        return <RevisionsDialogComponent />
-    }
-
-}
-
 async function getNote(noteId?: string | null) {
     if (noteId) {
         return await froca.getNote(noteId);
diff --git a/apps/client/src/widgets/dialogs/sort_child_notes.tsx b/apps/client/src/widgets/dialogs/sort_child_notes.tsx
index d73b84cae..522096a12 100644
--- a/apps/client/src/widgets/dialogs/sort_child_notes.tsx
+++ b/apps/client/src/widgets/dialogs/sort_child_notes.tsx
@@ -5,12 +5,11 @@ import FormCheckbox from "../react/FormCheckbox";
 import FormRadioGroup from "../react/FormRadioGroup";
 import FormTextBox from "../react/FormTextBox";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import server from "../../services/server";
 import FormGroup from "../react/FormGroup";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function SortChildNotesDialogComponent() {
+export default function SortChildNotesDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ sortBy, setSortBy ] = useState("title");
     const [ sortDirection, setSortDirection ] = useState("asc");
@@ -19,7 +18,7 @@ function SortChildNotesDialogComponent() {
     const [ sortLocale, setSortLocale ] = useState("");
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("sortChildNotes", ({ node }) => {
+    useTriliumEventBeta("sortChildNotes", ({ node }) => {
         setParentNoteId(node.data.noteId);
         setShown(true);
     });
@@ -89,11 +88,3 @@ function SortChildNotesDialogComponent() {
         </Modal>
     )
 }
-
-export default class SortChildNotesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <SortChildNotesDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/upload_attachments.tsx b/apps/client/src/widgets/dialogs/upload_attachments.tsx
index 8f53dd0fe..fb18efa36 100644
--- a/apps/client/src/widgets/dialogs/upload_attachments.tsx
+++ b/apps/client/src/widgets/dialogs/upload_attachments.tsx
@@ -9,9 +9,9 @@ import ReactBasicWidget from "../react/ReactBasicWidget";
 import options from "../../services/options";
 import importService from "../../services/import.js";
 import tree from "../../services/tree";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEventBeta } from "../react/hooks";
 
-function UploadAttachmentsDialogComponent() {
+export default function UploadAttachmentsDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ files, setFiles ] = useState<FileList | null>(null);
     const [ shrinkImages, setShrinkImages ] = useState(options.is("compressImages"));
@@ -19,7 +19,7 @@ function UploadAttachmentsDialogComponent() {
     const [ description, setDescription ] = useState<string | undefined>(undefined);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showUploadAttachmentsDialog", ({ noteId }) => {
+    useTriliumEventBeta("showUploadAttachmentsDialog", ({ noteId }) => {
         setParentNoteId(noteId);
         setShown(true);
     });
@@ -64,11 +64,3 @@ function UploadAttachmentsDialogComponent() {
         </Modal>
     );
 }
-
-export default class UploadAttachmentsDialog extends ReactBasicWidget {
-
-    get component() {
-        return <UploadAttachmentsDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/react/FormGroup.tsx b/apps/client/src/widgets/react/FormGroup.tsx
index 45394563b..400a2ef7f 100644
--- a/apps/client/src/widgets/react/FormGroup.tsx
+++ b/apps/client/src/widgets/react/FormGroup.tsx
@@ -25,7 +25,7 @@ export default function FormGroup({ name, label, title, className, children, des
 
             {childWithId}
 
-            {description && <small className="form-text">{description}</small>}
+            {description && <div><small className="form-text">{description}</small></div>}
         </div>
     );
 }