diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx
index 2772589cf..8c52d354a 100644
--- a/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx
+++ b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx
@@ -7,8 +7,8 @@ import {
   useBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
+import { RiImage2Fill } from "react-icons/ri";
 
-// TODO: Fix
 export default function App() {
   // Creates a new editor instance.
   const editor = useBlockNote();
@@ -19,7 +19,7 @@ export default function App() {
       <FormattingToolbarController
         formattingToolbar={() => (
           <FormattingToolbar
-            blockTypeDropdownItems={() => [
+            blockTypeDropdownItems={[
               ...blockTypeDropdownItems,
               {
                 name: "Specific Image",
diff --git a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx b/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx
index 6bffffa23..e5223f134 100644
--- a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx
+++ b/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx
@@ -3,11 +3,11 @@ import {
   BlockTypeDropdown,
   ColorStyleButton,
   CreateLinkButton,
+  FormattingToolbar,
   ImageCaptionButton,
   NestBlockButton,
   ReplaceImageButton,
   TextAlignButton,
-  ToolbarWrapper,
   UnnestBlockButton,
 } from "@blocknote/react";
 
@@ -15,7 +15,7 @@ import { CustomButton } from "./CustomButton";
 
 export function CustomFormattingToolbar() {
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <BlockTypeDropdown key={"blockTypeDropdown"} />
 
       <CustomButton key={"customButton"} />
@@ -48,6 +48,6 @@ export function CustomFormattingToolbar() {
       <UnnestBlockButton key={"unnestBlockButton"} />
 
       <CreateLinkButton key={"createLinkButton"} />
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 }
diff --git a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx b/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx
index 4b87da864..be924a7f7 100644
--- a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx
+++ b/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx
@@ -1,13 +1,17 @@
-import { DragHandle, SideMenuProps, SideMenuWrapper } from "@blocknote/react";
+import {
+  DragHandle,
+  SideMenu,
+  SideMenuProps,
+} from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import { CustomButton } from "./CustomButton";
 
 export function CustomSideMenu(props: SideMenuProps) {
   return (
-    <SideMenuWrapper>
+    <SideMenu {...props}>
       <CustomButton {...props} />
       <DragHandle {...props} />
-    </SideMenuWrapper>
+    </SideMenu>
   );
 }
diff --git a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx b/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx
index 4b4a193cb..81993b47c 100644
--- a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx
+++ b/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx
@@ -1,21 +1,21 @@
 import {
   BlockColorsButton,
+  DragHandleMenu,
   DragHandleMenuItem,
   DragHandleMenuProps,
-  DragHandleMenuWrapper,
   RemoveBlockButton,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 export function CustomDragHandleMenu(props: DragHandleMenuProps) {
   return (
-    <DragHandleMenuWrapper {...props}>
+    <DragHandleMenu {...props}>
       <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
       <BlockColorsButton {...props}>Colors</BlockColorsButton>
       {/*Custom item which opens an alert when clicked.*/}
       <DragHandleMenuItem onClick={() => window.alert("Button Pressed!")}>
         Open Alert
       </DragHandleMenuItem>
-    </DragHandleMenuWrapper>
+    </DragHandleMenu>
   );
 }
diff --git a/examples/06-custom-schema/react-custom-styles/App.tsx b/examples/06-custom-schema/react-custom-styles/App.tsx
index e0139d443..8c7627f1f 100644
--- a/examples/06-custom-schema/react-custom-styles/App.tsx
+++ b/examples/06-custom-schema/react-custom-styles/App.tsx
@@ -7,10 +7,10 @@ import {
 } from "@blocknote/core";
 import {
   BlockNoteView,
+  FormattingToolbar,
   FormattingToolbarController,
   FormattingToolbarProps,
   ToolbarButton,
-  ToolbarWrapper,
   createReactStyleSpec,
   useActiveStyles,
   useBlockNote,
@@ -62,7 +62,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
@@ -83,7 +83,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 };
 
diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx
index 8f54aee78..99768bcd9 100644
--- a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx
+++ b/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx
@@ -7,10 +7,10 @@ import {
 } from "@blocknote/core";
 import {
   BlockNoteView,
+  FormattingToolbar,
   FormattingToolbarController,
   FormattingToolbarProps,
   ToolbarButton,
-  ToolbarWrapper,
   useActiveStyles,
   useBlockNote,
   useBlockNoteEditor,
@@ -67,7 +67,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
   const activeStyles = useActiveStyles(editor);
 
   return (
-    <ToolbarWrapper>
+    <FormattingToolbar>
       <ToolbarButton
         mainTooltip={"small"}
         onClick={() => {
@@ -88,7 +88,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
         isSelected={!!activeStyles.fontSize}>
         Font size
       </ToolbarButton>
-    </ToolbarWrapper>
+    </FormattingToolbar>
   );
 };
 
diff --git a/packages/react/src/components-shared/UiComponentTypes.ts b/packages/react/src/components-shared/UiComponentTypes.ts
deleted file mode 100644
index cc2b29945..000000000
--- a/packages/react/src/components-shared/UiComponentTypes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { BlockNoteEditor } from "@blocknote/core";
-import { CSSProperties } from "react";
-
-export type UiComponentData<
-  UiElementData,
-  UiElementPluginName extends keyof BlockNoteEditor<any, any, any>
-> = UiElementData &
-  Omit<
-    BlockNoteEditor<any, any, any>[UiElementPluginName],
-    "plugin" | "on" | "onPositionUpdate" | "onDataUpdate" | "off"
-  >;
-
-export type UiComponentPosition = {
-  isMounted: boolean;
-  ref: (node: HTMLElement | null) => void;
-  style: CSSProperties;
-};
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
index 1c77842fe..158ac4ec3 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts
@@ -1,3 +1,5 @@
+import { BlockTypeDropdownItem } from "./mantine/DefaultDropdowns/BlockTypeDropdown";
+
 export type FormattingToolbarProps = {
-  items?: JSX.Element[];
+  blockTypeDropdownItems?: BlockTypeDropdownItem[];
 };
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
index 416ee959a..1a4445a8a 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx
@@ -18,7 +18,7 @@ import { IconType } from "react-icons";
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type BasicTextStyle = "bold" | "italic" | "underline" | "strike" | "code";
 
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
index 3a7af8c2b..e4967e2a2 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx
@@ -11,9 +11,9 @@ import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ColorIcon } from "../../../../components-shared/ColorPicker/ColorIcon";
-import { ColorPicker } from "../../../../components-shared/ColorPicker/ColorPicker";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ColorIcon } from "../../../mantine-shared/ColorPicker/ColorIcon";
+import { ColorPicker } from "../../../mantine-shared/ColorPicker/ColorPicker";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 function checkColorInSchema<Color extends "text" | "background">(
   color: Color,
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
index 737561192..560803beb 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx
@@ -11,8 +11,8 @@ import {
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
 import { EditHyperlinkMenu } from "../../../HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu";
 
 // TODO: Make sure Link is in inline content schema
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
index 9300cf259..99c71ff7c 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx
@@ -14,10 +14,10 @@ import {
 } from "react";
 import { RiText } from "react-icons/ri";
 
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
-import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton";
-import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx
index 99ddecdf8..aabed5e2d 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx
@@ -9,7 +9,7 @@ import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 export const NestBlockButton = () => {
   const editor = useBlockNoteEditor<
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
index 29307ea49..6263817ec 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx
@@ -10,7 +10,7 @@ import { RiImageEditFill } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 import { ImageToolbar } from "../../../ImageToolbar/mantine/ImageToolbar";
 
 export const ReplaceImageButton = () => {
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
index 9557534ae..4ed8d2387 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx
@@ -17,7 +17,7 @@ import {
 
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton";
+import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
 
 type TextAlignment = DefaultProps["textAlignment"];
 
diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
index d3a1e7783..105622548 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx
@@ -18,8 +18,8 @@ import {
 import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
-import { ToolbarDropdownItemProps } from "../../../../components-shared/Toolbar/ToolbarDropdownItem";
-import { ToolbarDropdown } from "../../../../components-shared/Toolbar/ToolbarDropdown";
+import { ToolbarDropdownItemProps } from "../../../mantine-shared/Toolbar/ToolbarDropdownItem";
+import { ToolbarDropdown } from "../../../mantine-shared/Toolbar/ToolbarDropdown";
 
 export type BlockTypeDropdownItem = {
   name: string;
@@ -31,7 +31,7 @@ export type BlockTypeDropdownItem = {
   ) => boolean;
 };
 
-// TODO: Filtering from schema should be done here, not in component
+// TODO: Filtering from schema should be done here, not in component?
 export const blockTypeDropdownItems: BlockTypeDropdownItem[] = [
   {
     name: "Paragraph",
diff --git a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
index 9d7e9bd4e..971820d82 100644
--- a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
+++ b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx
@@ -1,19 +1,19 @@
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
 import { FormattingToolbarProps } from "../FormattingToolbarProps";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
-import {
-  BlockTypeDropdown,
-  BlockTypeDropdownItem,
-} from "./DefaultDropdowns/BlockTypeDropdown";
-import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
-import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
 import { BasicTextStyleButton } from "./DefaultButtons/BasicTextStyleButton";
-import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
 import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton";
+import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
+import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton";
 import {
   NestBlockButton,
   UnnestBlockButton,
 } from "./DefaultButtons/NestBlockButtons";
-import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
+import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton";
+import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
+import {
+  BlockTypeDropdown,
+  BlockTypeDropdownItem,
+} from "./DefaultDropdowns/BlockTypeDropdown";
 
 export const getFormattingToolbarItems = (
   blockTypeDropdownItems?: BlockTypeDropdownItem[]
@@ -41,10 +41,13 @@ export const getFormattingToolbarItems = (
 ];
 
 // TODO: This is basically the same as `ToolbarWrapper`, seems pretty useless
-export const FormattingToolbar = (props: FormattingToolbarProps) => {
+export const FormattingToolbar = (
+  props: FormattingToolbarProps & { children?: React.ReactNode }
+) => {
   return (
-    <ToolbarWrapper>
-      {props.items || getFormattingToolbarItems()}
-    </ToolbarWrapper>
+    <Toolbar>
+      {props.children ||
+        getFormattingToolbarItems(props.blockTypeDropdownItems)}
+    </Toolbar>
   );
 };
diff --git a/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
index bca001770..d5a71daff 100644
--- a/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
+++ b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx
@@ -9,8 +9,8 @@ import {
 } from "react";
 import { RiLink, RiText } from "react-icons/ri";
 
-import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown";
-import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem";
+import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown";
+import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem";
 
 export type EditHyperlinkMenuProps = {
   url: string;
diff --git a/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
index a25b80edf..88b9ff771 100644
--- a/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
+++ b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx
@@ -3,8 +3,8 @@ import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri";
 
 import { HyperlinkToolbarProps } from "../HyperlinkToolbarProps";
 import { EditHyperlinkMenu } from "./EditHyperlinkMenu/EditHyperlinkMenu";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
-import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
+import { ToolbarButton } from "../../mantine-shared/Toolbar/ToolbarButton";
 
 export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
   const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -40,7 +40,7 @@ export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
   }
 
   return (
-    <ToolbarWrapper onMouseEnter={stopHideTimer} onMouseLeave={startHideTimer}>
+    <Toolbar onMouseEnter={stopHideTimer} onMouseLeave={startHideTimer}>
       <ToolbarButton
         mainTooltip="Edit"
         isSelected={false}
@@ -61,6 +61,6 @@ export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => {
         onClick={deleteHyperlink}
         icon={RiLinkUnlink}
       />
-    </ToolbarWrapper>
+    </Toolbar>
   );
 };
diff --git a/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
index dd1ea28bf..bac953ad7 100644
--- a/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
+++ b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx
@@ -23,7 +23,7 @@ import {
 
 import { useBlockNoteEditor } from "../../../editor/BlockNoteContext";
 import { ImageToolbarProps } from "../ImageToolbarProps";
-import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper";
+import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar";
 
 export const ImageToolbar = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
@@ -116,7 +116,7 @@ export const ImageToolbar = <
   }, [editor, props.block, currentURL]);
 
   return (
-    <ToolbarWrapper className={"bn-image-toolbar"}>
+    <Toolbar className={"bn-image-toolbar"}>
       <Tabs value={openTab} onChange={setOpenTab as any}>
         {uploading && <LoadingOverlay visible={uploading} />}
 
@@ -169,6 +169,6 @@ export const ImageToolbar = <
           </div>
         </Tabs.Panel>
       </Tabs>
-    </ToolbarWrapper>
+    </Toolbar>
   );
 };
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx
index 3e27e26b6..0755b93ee 100644
--- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx
@@ -16,7 +16,7 @@ import { useBlockNoteEditor } from "../../../../../editor/BlockNoteContext";
 import { usePreventMenuOverflow } from "../../../../../hooks/usePreventMenuOverflow";
 import { DragHandleMenuProps } from "../../DragHandleMenuProps";
 import { DragHandleMenuItem } from "../DragHandleMenuItem";
-import { ColorPicker } from "../../../../../components-shared/ColorPicker/ColorPicker";
+import { ColorPicker } from "../../../../mantine-shared/ColorPicker/ColorPicker";
 
 export const BlockColorsButton = <
   BSchema extends BlockSchema = DefaultBlockSchema,
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx
index fb9692ba2..0947e4e6f 100644
--- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx
+++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx
@@ -7,8 +7,8 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 
+import { Menu } from "@mantine/core";
 import { DragHandleMenuProps } from "../DragHandleMenuProps";
-import { DragHandleMenuWrapper } from "./DragHandleMenuWrapper";
 import { BlockColorsButton } from "./DefaultButtons/BlockColorsButton";
 import { RemoveBlockButton } from "./DefaultButtons/RemoveBlockButton";
 
@@ -17,10 +17,14 @@ export const DragHandleMenu = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(
-  props: DragHandleMenuProps<BSchema, I, S>
+  props: DragHandleMenuProps<BSchema, I, S> & { children?: React.ReactNode }
 ) => (
-  <DragHandleMenuWrapper>
-    <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
-    <BlockColorsButton {...props}>Colors</BlockColorsButton>
-  </DragHandleMenuWrapper>
+  <Menu.Dropdown className={"bn-drag-handle-menu"}>
+    {props.children || (
+      <>
+        <RemoveBlockButton {...props}>Delete</RemoveBlockButton>
+        <BlockColorsButton {...props}>Colors</BlockColorsButton>
+      </>
+    )}
+  </Menu.Dropdown>
 );
diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx
deleted file mode 100644
index 702f5ae30..000000000
--- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Menu } from "@mantine/core";
-import { ReactNode } from "react";
-
-export const DragHandleMenuWrapper = (props: { children: ReactNode }) => (
-  <Menu.Dropdown className={"bn-drag-handle-menu"}>
-    {props.children}
-  </Menu.Dropdown>
-);
diff --git a/packages/react/src/components/SideMenu/mantine/SideMenu.tsx b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx
index dc7301c9a..5add0472b 100644
--- a/packages/react/src/components/SideMenu/mantine/SideMenu.tsx
+++ b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx
@@ -7,8 +7,8 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 
+import { Group } from "@mantine/core";
 import { SideMenuProps } from "../SideMenuProps";
-import { SideMenuWrapper } from "./SideMenuWrapper";
 import { AddBlockButton } from "./DefaultButtons/AddBlockButton";
 import { DragHandle } from "./DefaultButtons/DragHandle";
 
@@ -17,14 +17,18 @@ export const SideMenu = <
   I extends InlineContentSchema = DefaultInlineContentSchema,
   S extends StyleSchema = DefaultStyleSchema
 >(
-  props: SideMenuProps<BSchema, I, S>
+  props: SideMenuProps<BSchema, I, S> & { children?: React.ReactNode }
 ) => {
   const { addBlock, ...rest } = props;
 
   return (
-    <SideMenuWrapper>
-      <AddBlockButton addBlock={addBlock} />
-      <DragHandle {...rest} />
-    </SideMenuWrapper>
+    <Group className={"bn-side-menu"} gap={0}>
+      {props.children || (
+        <>
+          <AddBlockButton addBlock={addBlock} />
+          <DragHandle {...rest} />
+        </>
+      )}
+    </Group>
   );
 };
diff --git a/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx b/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx
deleted file mode 100644
index 9fc0291ba..000000000
--- a/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Group } from "@mantine/core";
-import { ReactNode } from "react";
-
-export const SideMenuWrapper = (props: { children: ReactNode }) => (
-  <Group className={"bn-side-menu"} gap={0}>
-    {props.children}
-  </Group>
-);
diff --git a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
index 4f1406a81..1c46a8f1a 100644
--- a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
+++ b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts
@@ -1,7 +1,7 @@
 import { offset, useFloating, useTransitionStyles } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "../../../components-shared/UiComponentTypes";
+import { UiComponentPosition } from "../../../hooks/UiComponentPosition";
 
 function getBoundingClientRectRow(
   referencePosCell: DOMRect | null,
diff --git a/packages/react/src/components-shared/ColorPicker/ColorIcon.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx
similarity index 100%
rename from packages/react/src/components-shared/ColorPicker/ColorIcon.tsx
rename to packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx
diff --git a/packages/react/src/components-shared/ColorPicker/ColorPicker.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx
similarity index 100%
rename from packages/react/src/components-shared/ColorPicker/ColorPicker.tsx
rename to packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
similarity index 90%
rename from packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
index 207515a77..1bdd7c620 100644
--- a/packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx
+++ b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx
@@ -2,7 +2,7 @@ import { mergeCSSClasses } from "@blocknote/core";
 import { Group } from "@mantine/core";
 import { forwardRef, HTMLAttributes } from "react";
 
-export const ToolbarWrapper = forwardRef<
+export const Toolbar = forwardRef<
   HTMLDivElement,
   HTMLAttributes<HTMLDivElement>
 >((props, ref) => {
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarButton.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
similarity index 93%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
index 41739565d..d0f76e964 100644
--- a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx
+++ b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx
@@ -4,7 +4,7 @@ import {
   ToolbarDropdownItemProps,
 } from "./ToolbarDropdownItem";
 import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget";
-import { usePreventMenuOverflow } from "../../hooks/usePreventMenuOverflow";
+import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow";
 
 export type ToolbarDropdownProps = {
   items: ToolbarDropdownItemProps[];
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx
diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx
similarity index 100%
rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx
rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx
diff --git a/packages/react/src/components-shared/Tooltip/TooltipContent.tsx b/packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx
similarity index 100%
rename from packages/react/src/components-shared/Tooltip/TooltipContent.tsx
rename to packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx
diff --git a/packages/react/src/hooks/UiComponentPosition.ts b/packages/react/src/hooks/UiComponentPosition.ts
new file mode 100644
index 000000000..d2f5a18dc
--- /dev/null
+++ b/packages/react/src/hooks/UiComponentPosition.ts
@@ -0,0 +1,7 @@
+import { CSSProperties } from "react";
+
+export type UiComponentPosition = {
+  isMounted: boolean;
+  ref: (node: HTMLElement | null) => void;
+  style: CSSProperties;
+};
diff --git a/packages/react/src/hooks/useUIElementPositioning.ts b/packages/react/src/hooks/useUIElementPositioning.ts
index d69106312..51e0fffab 100644
--- a/packages/react/src/hooks/useUIElementPositioning.ts
+++ b/packages/react/src/hooks/useUIElementPositioning.ts
@@ -5,7 +5,7 @@ import {
 } from "@floating-ui/react";
 import { useEffect, useMemo } from "react";
 
-import { UiComponentPosition } from "../components-shared/UiComponentTypes";
+import { UiComponentPosition } from "./UiComponentPosition";
 
 export function useUIElementPositioning(
   show: boolean,
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4daeff52f..98eac493b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -5,59 +5,56 @@ export * from "./editor/BlockNoteTheme";
 export * from "./editor/BlockNoteView";
 export * from "./editor/defaultThemes";
 
+export * from "./components/FormattingToolbar/FormattingToolbarController";
+export * from "./components/FormattingToolbar/FormattingToolbarProps";
+export * from "./components/FormattingToolbar/mantine/FormattingToolbar";
+export * from "./components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton";
 export * from "./components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton";
-export * from "./components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton";
 export * from "./components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown";
-export * from "./components/FormattingToolbar/mantine/FormattingToolbar";
-export * from "./components/FormattingToolbar/FormattingToolbarProps";
-export * from "./components/FormattingToolbar/FormattingToolbarController";
 
-export * from "./components/HyperlinkToolbar/mantine/HyperlinkToolbar";
-export * from "./components/HyperlinkToolbar/HyperlinkToolbarProps";
 export * from "./components/HyperlinkToolbar/HyperlinkToolbarController";
+export * from "./components/HyperlinkToolbar/HyperlinkToolbarProps";
+export * from "./components/HyperlinkToolbar/mantine/HyperlinkToolbar";
 
+export * from "./components/SideMenu/SideMenuController";
+export * from "./components/SideMenu/SideMenuProps";
+export * from "./components/SideMenu/mantine/SideMenu";
+export * from "./components/SideMenu/mantine/SideMenuButton";
 export * from "./components/SideMenu/mantine/DefaultButtons/AddBlockButton";
 export * from "./components/SideMenu/mantine/DefaultButtons/DragHandle";
-export * from "./components/SideMenu/mantine/SideMenuButton";
-export * from "./components/SideMenu/mantine/SideMenuWrapper";
-export * from "./components/SideMenu/mantine/SideMenu";
-export * from "./components/SideMenu/SideMenuProps";
-export * from "./components/SideMenu/SideMenuController";
 
+export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuProps";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenu";
+export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem";
 export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton";
 export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultButtons/RemoveBlockButton";
-export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper";
-export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem";
-export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenu";
-export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuProps";
 
+export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems";
+export * from "./components/SuggestionMenu/SuggestionMenuController";
+export * from "./components/SuggestionMenu/SuggestionMenuWrapper";
+export * from "./components/SuggestionMenu/types";
 export * from "./components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems";
 export * from "./components/SuggestionMenu/hooks/useLoadSuggestionMenuItems";
 export * from "./components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation";
-export * from "./components/SuggestionMenu/mantine/SuggestionMenuItem";
 export * from "./components/SuggestionMenu/mantine/SuggestionMenu";
-export * from "./components/SuggestionMenu/SuggestionMenuWrapper";
-export * from "./components/SuggestionMenu/SuggestionMenuController";
-export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems";
-export * from "./components/SuggestionMenu/types";
+export * from "./components/SuggestionMenu/mantine/SuggestionMenuItem";
 
-export * from "./components/ImageToolbar/mantine/ImageToolbar";
-export * from "./components/ImageToolbar/ImageToolbarProps";
 export * from "./components/ImageToolbar/ImageToolbarController";
+export * from "./components/ImageToolbar/ImageToolbarProps";
+export * from "./components/ImageToolbar/mantine/ImageToolbar";
 
-export * from "./components/TableHandles/mantine/TableHandle";
 export * from "./components/TableHandles/TableHandleProps";
 export * from "./components/TableHandles/TableHandlesController";
 export * from "./components/TableHandles/hooks/useTableHandlesPositioning";
+export * from "./components/TableHandles/mantine/TableHandle";
 
-export * from "./components-shared/Toolbar/ToolbarWrapper";
-export * from "./components-shared/Toolbar/ToolbarButton";
-export * from "./components-shared/Toolbar/ToolbarDropdown";
+export * from "./components/mantine-shared/Toolbar/ToolbarButton";
+export * from "./components/mantine-shared/Toolbar/ToolbarDropdown";
 
 export * from "./hooks/useActiveStyles";
 export * from "./hooks/useBlockNote";
diff --git a/tests/src/utils/components/Editor.tsx b/tests/src/utils/components/Editor.tsx
index 61dfb6dd0..9bfb3cb63 100644
--- a/tests/src/utils/components/Editor.tsx
+++ b/tests/src/utils/components/Editor.tsx
@@ -1,10 +1,11 @@
-import { filterSuggestionItems } from "@blocknote/core";
+import { BlockSchemaFromSpecs, filterSuggestionItems } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import {
   BlockNoteDefaultUI,
   BlockNoteView,
-  DefaultPositionedSuggestionMenu,
+  DefaultReactSuggestionItem,
   getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
   useBlockNote,
 } from "@blocknote/react";
 import { Alert, insertAlert } from "../customblocks/Alert";
@@ -22,8 +23,6 @@ const blockSpecs = {
   // toc: TableOfContents,
 };
 
-const defaultItems = getDefaultReactSlashMenuItems();
-
 const customItems = [
   insertAlert,
   // insertButton,
@@ -33,8 +32,6 @@ const customItems = [
   // insertTableOfContents,
 ];
 
-const allItems = [...defaultItems, ...customItems];
-
 export default function Editor() {
   const editor = useBlockNote({
     blockSpecs,
@@ -50,11 +47,19 @@ export default function Editor() {
   // TODO: how to customize slashmenu
   return (
     <BlockNoteView editor={editor}>
-      <BlockNoteDefaultUI editor={editor} slashMenu={false} />
-      <DefaultPositionedSuggestionMenu
-        editor={editor}
-        getItems={async (query) => filterSuggestionItems(allItems, query)}
-        onItemClick={(i) => i.onItemClick(editor)}
+      <BlockNoteDefaultUI slashMenu={false} />
+      <SuggestionMenuController
+        getItems={async (query) =>
+          filterSuggestionItems(
+            [
+              ...getDefaultReactSlashMenuItems(editor),
+              ...customItems,
+            ] satisfies DefaultReactSuggestionItem<
+              BlockSchemaFromSpecs<typeof blockSpecs>
+            >[],
+            query
+          )
+        }
         // suggestionMenuComponent={MantineSuggestionMenu}
         triggerCharacter="/"
       />