diff --git a/packages/remirror__core-utils/src/command-utils.ts b/packages/remirror__core-utils/src/command-utils.ts
index 4d16092a76..5543e43d3a 100644
--- a/packages/remirror__core-utils/src/command-utils.ts
+++ b/packages/remirror__core-utils/src/command-utils.ts
@@ -308,6 +308,21 @@ export function isChrome(minVersion = 0): boolean {
   return parsedAgent ? Number.parseInt(assertGet(parsedAgent, 2), 10) >= minVersion : false;
 }
 
+/**
+ * Taken from https://stackoverflow.com/a/4900484
+ *
+ * Check that the browser is safari. Supports passing a minimum version to check
+ * that it is a greater than or equal to this version.
+ */
+export function isSafari(minVersion = 0): boolean {
+  const isMac = navigator.userAgent.match(/Mac/);
+  const parsedAgent = navigator.userAgent.match(/Safari\/(\d+)\./);
+
+  return isMac && !isChrome() && parsedAgent
+    ? Number.parseInt(assertGet(parsedAgent, 2), 10) >= minVersion
+    : false;
+}
+
 /**
  * Checks the selection for the current state and updates the active transaction
  * to a selection that is consistent with the initial selection.
diff --git a/packages/remirror__core-utils/src/index.ts b/packages/remirror__core-utils/src/index.ts
index 05d55dee51..2368c92513 100644
--- a/packages/remirror__core-utils/src/index.ts
+++ b/packages/remirror__core-utils/src/index.ts
@@ -6,6 +6,7 @@ export type {
 } from './command-utils';
 export {
   isChrome,
+  isSafari,
   lift,
   preserveSelection,
   removeMark,
diff --git a/packages/remirror__core/src/builtins/keymap-extension.ts b/packages/remirror__core/src/builtins/keymap-extension.ts
index 3eb0996c17..519a8f92ee 100644
--- a/packages/remirror__core/src/builtins/keymap-extension.ts
+++ b/packages/remirror__core/src/builtins/keymap-extension.ts
@@ -603,8 +603,8 @@ export type ShortcutMap = Record<NamedShortcut, string>;
 export const DEFAULT_SHORTCUTS: ShortcutMap = {
   [NamedShortcut.Copy]: 'Mod-c',
   [NamedShortcut.Cut]: 'Mod-x',
-  [NamedShortcut.Paste]: 'Mod-p',
-  [NamedShortcut.PastePlain]: 'Mod-Shift-p',
+  [NamedShortcut.Paste]: 'Mod-v',
+  [NamedShortcut.PastePlain]: 'Mod-Shift-v',
   [NamedShortcut.SelectAll]: 'Mod-a',
   [NamedShortcut.Undo]: 'Mod-z',
   [NamedShortcut.Redo]: environment.isMac ? 'Shift-Mod-z' : 'Mod-y',
diff --git a/packages/remirror__extension-callout/src/callout-extension.ts b/packages/remirror__extension-callout/src/callout-extension.ts
index 2d55668acb..5feae419a8 100644
--- a/packages/remirror__extension-callout/src/callout-extension.ts
+++ b/packages/remirror__extension-callout/src/callout-extension.ts
@@ -25,7 +25,7 @@ import { TextSelection } from '@remirror/pm/state';
 import { EditorView } from '@remirror/pm/view';
 import { ExtensionCalloutTheme } from '@remirror/theme';
 
-import type { CalloutAttributes, CalloutOptions } from './callout-types';
+import type { CalloutExtensionAttributes, CalloutOptions } from './callout-types';
 import {
   dataAttributeEmoji,
   dataAttributeType,
@@ -164,7 +164,7 @@ export class CalloutExtension extends NodeExtension<CalloutOptions> {
    * ```
    */
   @command(toggleCalloutOptions)
-  toggleCallout(attributes: CalloutAttributes = {}): CommandFunction {
+  toggleCallout(attributes: CalloutExtensionAttributes = {}): CommandFunction {
     return toggleWrap(this.type, attributes);
   }
 
@@ -179,7 +179,7 @@ export class CalloutExtension extends NodeExtension<CalloutOptions> {
    * ```
    */
   @command(toggleCalloutOptions)
-  updateCallout(attributes: CalloutAttributes, pos?: number): CommandFunction {
+  updateCallout(attributes: CalloutExtensionAttributes, pos?: number): CommandFunction {
     return updateNodeAttributes(this.type)(attributes, pos);
   }
 
diff --git a/packages/remirror__extension-callout/src/callout-types.ts b/packages/remirror__extension-callout/src/callout-types.ts
index 105f4e45ed..2f9a724352 100644
--- a/packages/remirror__extension-callout/src/callout-types.ts
+++ b/packages/remirror__extension-callout/src/callout-types.ts
@@ -35,7 +35,7 @@ export interface CalloutOptions {
   renderEmoji?: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => HTMLElement;
 }
 
-export interface CalloutAttributes extends ProsemirrorAttributes {
+export interface CalloutExtensionAttributes extends ProsemirrorAttributes {
   /**
    * The type of callout, for instance `info`, `warning`, `error`, `success` or `blank`.
    *
diff --git a/packages/remirror__extension-callout/src/callout-utils.ts b/packages/remirror__extension-callout/src/callout-utils.ts
index 6d9667680a..8242f97cb0 100644
--- a/packages/remirror__extension-callout/src/callout-utils.ts
+++ b/packages/remirror__extension-callout/src/callout-utils.ts
@@ -11,7 +11,7 @@ import {
 } from '@remirror/core';
 import { ExtensionCalloutMessages } from '@remirror/messages';
 
-import type { CalloutAttributes } from './callout-types';
+import type { CalloutExtensionAttributes } from './callout-types';
 
 export const dataAttributeType = 'data-callout-type';
 
@@ -21,9 +21,9 @@ export const dataAttributeEmoji = 'data-callout-emoji';
  * Check that the attributes exist and are valid for the codeBlock
  * updateAttributes.
  */
-export function isValidCalloutAttributes(
+export function isValidCalloutExtensionAttributes(
   attributes: ProsemirrorAttributes,
-): attributes is CalloutAttributes {
+): attributes is CalloutExtensionAttributes {
   if (attributes && isObject(attributes)) {
     const attributesChecklist = Object.entries(attributes).map(([key, value]) => {
       switch (key) {
@@ -49,9 +49,9 @@ export function isValidCalloutAttributes(
  * This is used to update the type of the callout.
  */
 export function updateNodeAttributes(type: NodeType) {
-  return (attributes: CalloutAttributes, pos?: number): CommandFunction =>
+  return (attributes: CalloutExtensionAttributes, pos?: number): CommandFunction =>
     ({ state: { tr, selection, doc }, dispatch }) => {
-      if (!isValidCalloutAttributes(attributes)) {
+      if (!isValidCalloutExtensionAttributes(attributes)) {
         throw new Error('Invalid attrs passed to the updateAttributes method');
       }
 
@@ -79,7 +79,7 @@ const { DESCRIPTION, LABEL } = ExtensionCalloutMessages;
 
 export const toggleCalloutOptions: Remirror.CommandDecoratorOptions = {
   icon: ({ attrs }) => {
-    switch (attrs?.type as CalloutAttributes['type']) {
+    switch (attrs?.type as CalloutExtensionAttributes['type']) {
       case 'error':
         return 'closeCircleLine';
       case 'success':
diff --git a/packages/remirror__extension-callout/src/index.ts b/packages/remirror__extension-callout/src/index.ts
index 5974707dbf..2cb27ab71f 100644
--- a/packages/remirror__extension-callout/src/index.ts
+++ b/packages/remirror__extension-callout/src/index.ts
@@ -1 +1,2 @@
 export * from './callout-extension';
+export type { CalloutExtensionAttributes, CalloutOptions } from './callout-types';
diff --git a/packages/remirror__extension-code-block/src/code-block-extension.ts b/packages/remirror__extension-code-block/src/code-block-extension.ts
index 42a45a583a..de0fdba38b 100644
--- a/packages/remirror__extension-code-block/src/code-block-extension.ts
+++ b/packages/remirror__extension-code-block/src/code-block-extension.ts
@@ -255,7 +255,7 @@ export class CodeBlockExtension extends NodeExtension<CodeBlockOptions> {
    * remove the code block altogether.
    */
   @command(toggleCodeBlockOptions)
-  toggleCodeBlock(attributes: Partial<CodeBlockAttributes>): CommandFunction {
+  toggleCodeBlock(attributes: Partial<CodeBlockAttributes> = {}): CommandFunction {
     return toggleBlockItem({
       type: this.type,
       toggleType: this.options.toggleName,
diff --git a/packages/remirror__extension-code-block/src/code-block-utils.ts b/packages/remirror__extension-code-block/src/code-block-utils.ts
index 3ebe69d2d2..ec5f621b7d 100644
--- a/packages/remirror__extension-code-block/src/code-block-utils.ts
+++ b/packages/remirror__extension-code-block/src/code-block-utils.ts
@@ -22,7 +22,7 @@ import {
   range,
   TextProps,
 } from '@remirror/core';
-import { ExtensionCodeMessages } from '@remirror/messages';
+import { ExtensionCodeBlockMessages } from '@remirror/messages';
 import { TextSelection } from '@remirror/pm/state';
 import { Decoration } from '@remirror/pm/view';
 
@@ -343,7 +343,7 @@ export function getLanguageFromDom(codeElement: HTMLElement): string | undefined
   );
 }
 
-const { DESCRIPTION, LABEL } = ExtensionCodeMessages;
+const { DESCRIPTION, LABEL } = ExtensionCodeBlockMessages;
 export const toggleCodeBlockOptions: Remirror.CommandDecoratorOptions = {
   icon: 'bracesLine',
   description: ({ t }) => t(DESCRIPTION),
diff --git a/packages/remirror__extension-history/src/history-extension.ts b/packages/remirror__extension-history/src/history-extension.ts
index 74877e674f..513b9a37df 100644
--- a/packages/remirror__extension-history/src/history-extension.ts
+++ b/packages/remirror__extension-history/src/history-extension.ts
@@ -7,6 +7,8 @@ import {
   environment,
   extension,
   Handler,
+  Helper,
+  helper,
   isFunction,
   keyBinding,
   KeyBindingProps,
@@ -20,7 +22,7 @@ import {
   Static,
 } from '@remirror/core';
 import { ExtensionHistoryMessages as Messages } from '@remirror/messages';
-import { history, redo, undo } from '@remirror/pm/history';
+import { history, redo, redoDepth, undo, undoDepth } from '@remirror/pm/history';
 
 export interface HistoryOptions {
   /**
@@ -197,6 +199,22 @@ export class HistoryExtension extends PlainExtension<HistoryOptions> {
   redo(): NonChainableCommandFunction {
     return nonChainable(this.wrapMethod(redo, this.options.onRedo));
   }
+
+  /**
+   * Returns the amount of undoable events available from the current state, or provide a custom state.
+   */
+  @helper()
+  undoDepth(state: EditorState = this.store.getState()): Helper<number> {
+    return undoDepth(state);
+  }
+
+  /**
+   * Returns the amount of redoable events available from the current state, or provide a custom state.
+   */
+  @helper()
+  redoDepth(state: EditorState = this.store.getState()): Helper<number> {
+    return redoDepth(state);
+  }
 }
 
 declare global {
diff --git a/packages/remirror__extension-list/src/task-list-extension.ts b/packages/remirror__extension-list/src/task-list-extension.ts
index 92cd0df400..2429ee34bd 100644
--- a/packages/remirror__extension-list/src/task-list-extension.ts
+++ b/packages/remirror__extension-list/src/task-list-extension.ts
@@ -55,7 +55,7 @@ export class TaskListExtension extends NodeExtension {
   /**
    * Toggle the task list for the current selection.
    */
-  @command({ icon: 'listCheck', label: ({ t }) => t(Messages.TASK_LIST_LABEL) })
+  @command({ icon: 'checkboxMultipleLine', label: ({ t }) => t(Messages.TASK_LIST_LABEL) })
   toggleTaskList(): CommandFunction {
     return toggleList(this.type, assertGet(this.store.schema.nodes, 'taskListItem'));
   }
diff --git a/packages/remirror__i18n/src/en/messages.po b/packages/remirror__i18n/src/en/messages.po
index 44552070e7..b595f3c52e 100644
--- a/packages/remirror__i18n/src/en/messages.po
+++ b/packages/remirror__i18n/src/en/messages.po
@@ -273,7 +273,7 @@ msgstr "Bulleted list"
 #: packages/remirror__messages/src/extension-callout-messages.ts:14
 msgid "extension.command.toggle-callout.description"
 msgstr ""
-"{level, select, info {Create an information callout block}\n"
+"{type, select, info {Create an information callout block}\n"
 "warning {Create a warning callout block}\n"
 "error {Create an error callout block}\n"
 "success {Create a success callout block}\n"
@@ -283,7 +283,7 @@ msgstr ""
 #: packages/remirror__messages/src/extension-callout-messages.ts:4
 msgid "extension.command.toggle-callout.label"
 msgstr ""
-"{level, select, info {Information Callout}\n"
+"{type, select, info {Information Callout}\n"
 "warning {Warning Callout}\n"
 "error {Error Callout}\n"
 "success {Success Callout}\n"
diff --git a/packages/remirror__i18n/src/en/messages.ts b/packages/remirror__i18n/src/en/messages.ts
index 2c93c2491d..3ea1b6d74e 100644
--- a/packages/remirror__i18n/src/en/messages.ts
+++ b/packages/remirror__i18n/src/en/messages.ts
@@ -67,7 +67,7 @@
   'extension.command.toggle-bullet-list.description': 'Bulleted list',
   'extension.command.toggle-callout.description': [
     [
-      'level',
+      'type',
       'select',
       {
         info: 'Create an information callout block',
@@ -80,7 +80,7 @@
   ],
   'extension.command.toggle-callout.label': [
     [
-      'level',
+      'type',
       'select',
       {
         info: 'Information Callout',
diff --git a/packages/remirror__icons/src/all-icons.ts b/packages/remirror__icons/src/all-icons.ts
index 9505ca80ef..ce20f70a0d 100644
--- a/packages/remirror__icons/src/all-icons.ts
+++ b/packages/remirror__icons/src/all-icons.ts
@@ -4992,21 +4992,6 @@ export const checkboxMultipleFill: IconTree[] = [
   },
 ];
 
-/**
- * The icon for `checkbox-multiple-line.svg` created by [RemixIcons](https://remixicons.com).
- * ![Checkbox Multiple Line](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
- */
-export const checkboxMultipleLine: IconTree[] = [
-  { tag: 'path', attr: { fill: 'none', d: 'M0 0h24v24H0z' } },
-  {
-    tag: 'path',
-    attr: {
-      fillRule: 'nonzero',
-      d: 'M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.993c0 .556-.449 1.007-1.007 1.007H3.007A1.006 1.006 0 0 1 2 20.993l.003-12.986C2.003 7.451 2.452 7 3.01 7H7zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3zm6 2H4.003L4 20h11V9zm-6.497 9l-3.536-3.536 1.414-1.414 2.122 2.122 4.242-4.243 1.414 1.414L8.503 18z',
-    },
-  },
-];
-
 /**
  * The icon for `china-railway-fill.svg` created by [RemixIcons](https://remixicons.com).
  * ![China Railway Fill](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Map/china-railway-fill.svg)
diff --git a/packages/remirror__icons/src/core-icons.ts b/packages/remirror__icons/src/core-icons.ts
index b3ac5c4ce3..ac2d9e8bb1 100644
--- a/packages/remirror__icons/src/core-icons.ts
+++ b/packages/remirror__icons/src/core-icons.ts
@@ -303,6 +303,21 @@ export const checkboxCircleLine: IconTree[] = [
   },
 ];
 
+/**
+ * The icon for `checkbox-multiple-line.svg` created by [RemixIcons](https://remixicons.com).
+ * ![Checkbox Multiple Line](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
+ */
+export const checkboxMultipleLine: IconTree[] = [
+  { tag: 'path', attr: { fill: 'none', d: 'M0 0h24v24H0z' } },
+  {
+    tag: 'path',
+    attr: {
+      fillRule: 'nonzero',
+      d: 'M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.993c0 .556-.449 1.007-1.007 1.007H3.007A1.006 1.006 0 0 1 2 20.993l.003-12.986C2.003 7.451 2.452 7 3.01 7H7zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3zm6 2H4.003L4 20h11V9zm-6.497 9l-3.536-3.536 1.414-1.414 2.122 2.122 4.242-4.243 1.414 1.414L8.503 18z',
+    },
+  },
+];
+
 /**
  * The icon for `clipboard-fill.svg` created by [RemixIcons](https://remixicons.com).
  * ![Clipboard Fill](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Document/clipboard-fill.svg)
diff --git a/packages/remirror__react-components/package.json b/packages/remirror__react-components/package.json
index 44c038baa4..b13eb85f49 100644
--- a/packages/remirror__react-components/package.json
+++ b/packages/remirror__react-components/package.json
@@ -38,7 +38,10 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.13.10",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.3.0",
     "@lingui/core": "^3.14.0",
+    "@mui/material": "^5.8.5",
     "@popperjs/core": "^2.9.2",
     "@remirror/core": "^2.0.0-beta.16",
     "@remirror/extension-positioner": "^2.0.0-beta.16",
@@ -55,11 +58,7 @@
     "create-context-state": "^2.0.0-beta.15",
     "match-sorter": "^6.3.0",
     "multishift": "^2.0.0-beta.16",
-    "react-color": "^2.19.3",
-    "react-popper": "^2.2.5",
-    "reakit": "^1.3.11",
-    "reakit-system-palette": "^0.14.2",
-    "reakit-utils": "^0.15.2"
+    "react-color": "^2.19.3"
   },
   "devDependencies": {
     "@remirror/pm": "^2.0.0-beta.16",
diff --git a/packages/remirror__react-components/src/button-groups/basic-formatting-button-group.tsx b/packages/remirror__react-components/src/button-groups/basic-formatting-button-group.tsx
new file mode 100644
index 0000000000..f6376bd3b9
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/basic-formatting-button-group.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import { ToggleBoldButton, ToggleItalicButton, ToggleUnderlineButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface BasicFormattingButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const BasicFormattingButtonGroup: FC<BasicFormattingButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleBoldButton />
+      <ToggleItalicButton />
+      <ToggleUnderlineButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/callout-type-button-group.tsx b/packages/remirror__react-components/src/button-groups/callout-type-button-group.tsx
new file mode 100644
index 0000000000..6f1177bdc8
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/callout-type-button-group.tsx
@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react';
+
+import { ToggleCalloutButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface CalloutTypeButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+const INFO_CALLOUT = { type: 'info' };
+const WARNING_CALLOUT = { type: 'warning' };
+const ERROR_CALLOUT = { type: 'error' };
+const SUCCESS_CALLOUT = { type: 'success' };
+
+export const CalloutTypeButtonGroup: FC<CalloutTypeButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleCalloutButton attrs={INFO_CALLOUT} />
+      <ToggleCalloutButton attrs={WARNING_CALLOUT} />
+      <ToggleCalloutButton attrs={ERROR_CALLOUT} />
+      <ToggleCalloutButton attrs={SUCCESS_CALLOUT} />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/command-button-group.tsx b/packages/remirror__react-components/src/button-groups/command-button-group.tsx
new file mode 100644
index 0000000000..53e4fd9a20
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/command-button-group.tsx
@@ -0,0 +1,21 @@
+import { Box, BoxProps } from '@mui/material';
+import React, { FC, ReactNode } from 'react';
+
+export interface CommandButtonGroupProps extends Omit<BoxProps, 'children'> {
+  children: ReactNode | ReactNode[];
+}
+
+export const CommandButtonGroup: FC<CommandButtonGroupProps> = (props) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        width: 'fit-content',
+        bgcolor: 'background.paper',
+        color: 'text.secondary',
+      }}
+      {...props}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/data-transfer-button-group.tsx b/packages/remirror__react-components/src/button-groups/data-transfer-button-group.tsx
new file mode 100644
index 0000000000..c4d8d7ba10
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/data-transfer-button-group.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import { CopyButton, CutButton, PasteButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface DataTransferButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const DataTransferButtonGroup: FC<DataTransferButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <CopyButton />
+      <CutButton />
+      <PasteButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/formatting-button-group.tsx b/packages/remirror__react-components/src/button-groups/formatting-button-group.tsx
new file mode 100644
index 0000000000..90fc6a5115
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/formatting-button-group.tsx
@@ -0,0 +1,27 @@
+import React, { FC, ReactNode } from 'react';
+
+import {
+  ToggleBoldButton,
+  ToggleCodeButton,
+  ToggleItalicButton,
+  ToggleStrikeButton,
+  ToggleUnderlineButton,
+} from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface FormattingButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const FormattingButtonGroup: FC<FormattingButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleBoldButton />
+      <ToggleItalicButton />
+      <ToggleUnderlineButton />
+      <ToggleStrikeButton />
+      <ToggleCodeButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/heading-level-button-group.tsx b/packages/remirror__react-components/src/button-groups/heading-level-button-group.tsx
new file mode 100644
index 0000000000..56b73b99a4
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/heading-level-button-group.tsx
@@ -0,0 +1,40 @@
+import React, { FC, ReactNode } from 'react';
+
+import { DropdownButton, ToggleHeadingButton } from '../buttons';
+import { ToggleHeadingMenuItem } from '../menus';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface HeadingLevelButtonGroupProps {
+  showAll?: boolean;
+  children?: ReactNode | ReactNode[];
+}
+
+const LEVEL_1 = { level: 1 };
+const LEVEL_2 = { level: 2 };
+const LEVEL_3 = { level: 3 };
+const LEVEL_4 = { level: 4 };
+const LEVEL_5 = { level: 5 };
+const LEVEL_6 = { level: 6 };
+
+export const HeadingLevelButtonGroup: FC<HeadingLevelButtonGroupProps> = ({
+  showAll = false,
+  children,
+}) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleHeadingButton attrs={LEVEL_1} />
+      <ToggleHeadingButton attrs={LEVEL_2} />
+      {!showAll ? (
+        <ToggleHeadingButton attrs={LEVEL_3} />
+      ) : (
+        <DropdownButton aria-label='More heading options'>
+          <ToggleHeadingMenuItem attrs={LEVEL_3} />
+          <ToggleHeadingMenuItem attrs={LEVEL_4} />
+          <ToggleHeadingMenuItem attrs={LEVEL_5} />
+          <ToggleHeadingMenuItem attrs={LEVEL_6} />
+        </DropdownButton>
+      )}
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/history-button-group.tsx b/packages/remirror__react-components/src/button-groups/history-button-group.tsx
new file mode 100644
index 0000000000..e0d55dd803
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/history-button-group.tsx
@@ -0,0 +1,18 @@
+import React, { FC, ReactNode } from 'react';
+
+import { RedoButton, UndoButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface HistoryButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const HistoryButtonGroup: FC<HistoryButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <UndoButton />
+      <RedoButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/index.ts b/packages/remirror__react-components/src/button-groups/index.ts
new file mode 100644
index 0000000000..1353766a05
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/index.ts
@@ -0,0 +1,8 @@
+export * from './basic-formatting-button-group';
+export * from './callout-type-button-group';
+export * from './command-button-group';
+export * from './data-transfer-button-group';
+export * from './formatting-button-group';
+export * from './heading-level-button-group';
+export * from './history-button-group';
+export * from './list-button-group';
diff --git a/packages/remirror__react-components/src/button-groups/list-button-group.tsx b/packages/remirror__react-components/src/button-groups/list-button-group.tsx
new file mode 100644
index 0000000000..893d09d56d
--- /dev/null
+++ b/packages/remirror__react-components/src/button-groups/list-button-group.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import { ToggleBulletListButton, ToggleOrderedListButton, ToggleTaskListButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface ListButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const ListButtonGroup: FC<ListButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleBulletListButton />
+      <ToggleOrderedListButton />
+      <ToggleTaskListButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/command-button.tsx b/packages/remirror__react-components/src/buttons/command-button.tsx
new file mode 100644
index 0000000000..0e66d3f612
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/command-button.tsx
@@ -0,0 +1,109 @@
+import { ToggleButton, ToggleButtonProps, Tooltip } from '@mui/material';
+import React, { FC, MouseEvent, MouseEventHandler, ReactNode, useCallback } from 'react';
+import { CoreIcon, isString } from '@remirror/core';
+
+import { Icon } from '../icons';
+import { useCommandOptionValues, UseCommandOptionValuesParams } from '../use-command-option-values';
+
+interface ButtonIconProps {
+  icon: CoreIcon | JSX.Element | null;
+}
+
+const ButtonIcon: FC<ButtonIconProps> = ({ icon }) => {
+  if (isString(icon)) {
+    return <Icon name={icon} size='1rem' />;
+  }
+
+  return icon;
+};
+
+export interface CommandButtonProps
+  extends Omit<ToggleButtonProps, 'value' | 'aria-label'>,
+    Omit<UseCommandOptionValuesParams, 'active' | 'attrs'> {
+  active?: UseCommandOptionValuesParams['active'];
+  'aria-label'?: string;
+  label?: NonNullable<ReactNode>;
+  commandName: string;
+  displayShortcut?: boolean;
+  onSelect: () => void;
+  icon?: CoreIcon | JSX.Element;
+  attrs?: UseCommandOptionValuesParams['attrs'];
+}
+
+export const CommandButton: FC<CommandButtonProps> = ({
+  commandName,
+  active = false,
+  enabled,
+  attrs,
+  onSelect,
+  onChange,
+  icon,
+  displayShortcut = true,
+  'aria-label': ariaLabel,
+  label,
+  ...rest
+}) => {
+  const handleChange = useCallback(
+    (e: MouseEvent<HTMLElement>, value: any) => {
+      onSelect();
+      onChange?.(e, value);
+    },
+    [onSelect, onChange],
+  );
+
+  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+
+  const commandOptions = useCommandOptionValues({ commandName, active, enabled, attrs });
+
+  let fallbackIcon = null;
+
+  if (commandOptions.icon) {
+    fallbackIcon = isString(commandOptions.icon) ? commandOptions.icon : commandOptions.icon.name;
+  }
+
+  const labelText = ariaLabel ?? commandOptions.label ?? '';
+  const tooltipText = label ?? labelText;
+  const shortcutText =
+    displayShortcut && commandOptions.shortcut ? ` (${commandOptions.shortcut})` : '';
+
+  return (
+    <Tooltip title={`${tooltipText}${shortcutText}`}>
+      <ToggleButton
+        aria-label={labelText}
+        selected={active}
+        disabled={!enabled}
+        onMouseDown={handleMouseDown}
+        color='primary'
+        size='small'
+        sx={{
+          padding: '6px 12px',
+          '&.Mui-selected': {
+            backgroundColor: 'primary.main',
+            color: 'primary.contrastText',
+          },
+          '&.Mui-selected:hover': {
+            backgroundColor: 'primary.dark',
+            color: 'primary.contrastText',
+          },
+          '&:not(:first-of-type)': {
+            marginLeft: '-1px',
+            borderLeft: '1px solid transparent',
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          },
+          '&:not(:last-of-type)': {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        }}
+        {...rest}
+        value={commandName}
+        onChange={handleChange}
+      >
+        <ButtonIcon icon={icon ?? fallbackIcon} />
+      </ToggleButton>
+    </Tooltip>
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/copy-button.tsx b/packages/remirror__react-components/src/buttons/copy-button.tsx
new file mode 100644
index 0000000000..196ec9022b
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/copy-button.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { useCommands, useCurrentSelection } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface CopyButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const CopyButton: FC<CopyButtonProps> = (props) => {
+  const { copy } = useCommands();
+  // Force component update on selection change
+  useCurrentSelection();
+
+  const handleSelect = useCallback(() => {
+    if (copy.enabled()) {
+      copy();
+    }
+  }, [copy]);
+
+  const enabled = copy.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='copy'
+      active={false}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/create-table-button.tsx b/packages/remirror__react-components/src/buttons/create-table-button.tsx
new file mode 100644
index 0000000000..88ef8f638e
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/create-table-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface CreateTableButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const CreateTableButton: FC<CreateTableButtonProps> = (props) => {
+  const { createTable } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (createTable.enabled()) {
+      createTable();
+    }
+  }, [createTable]);
+
+  const active = useActive().table();
+  const enabled = createTable.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='createTable'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/cut-button.tsx b/packages/remirror__react-components/src/buttons/cut-button.tsx
new file mode 100644
index 0000000000..ed64dcba84
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/cut-button.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { useCommands, useCurrentSelection } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface CutButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const CutButton: FC<CutButtonProps> = (props) => {
+  const { cut } = useCommands();
+  // Force component update on selection change
+  useCurrentSelection();
+
+  const handleSelect = useCallback(() => {
+    if (cut.enabled()) {
+      cut();
+    }
+  }, [cut]);
+
+  const enabled = cut.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='cut'
+      active={false}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/dropdown-button.tsx b/packages/remirror__react-components/src/buttons/dropdown-button.tsx
new file mode 100644
index 0000000000..047df9c1ef
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/dropdown-button.tsx
@@ -0,0 +1,77 @@
+import { IconButton, Menu, MenuProps, Tooltip } from '@mui/material';
+import React, { FC, MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
+import { uniqueId } from '@remirror/core';
+
+import { Icon } from '../icons';
+
+export interface DropdownButtonProps extends Omit<MenuProps, 'open' | 'anchorEl' | 'id'> {
+  'aria-label': string;
+  label?: NonNullable<ReactNode>;
+  icon?: JSX.Element;
+}
+
+export const DropdownButton: FC<DropdownButtonProps> = ({
+  label,
+  'aria-label': ariaLabel,
+  icon,
+  children,
+  onClose,
+  ...rest
+}) => {
+  const id = useRef<string>(uniqueId());
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleMouseDown: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+
+  const handleClick: MouseEventHandler<HTMLElement> = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  const handleClose: MenuProps['onClose'] = useCallback(
+    (e: Event, reason: 'backdropClick' | 'escapeKeyDown') => {
+      setAnchorEl(null);
+      onClose?.(e, reason);
+    },
+    [onClose],
+  );
+
+  return (
+    <>
+      <Tooltip title={label ?? ariaLabel}>
+        <IconButton
+          aria-label={ariaLabel}
+          aria-controls={open ? id.current : undefined}
+          aria-haspopup
+          aria-expanded={open ? 'true' : undefined}
+          onMouseDown={handleMouseDown}
+          onClick={handleClick}
+          size='small'
+          sx={(theme) => ({
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: `${theme.shape.borderRadius}px`,
+            padding: '6px 12px',
+            '&:not(:first-of-type)': {
+              marginLeft: '-1px',
+              borderLeft: '1px solid transparent',
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            },
+            '&:not(:last-of-type)': {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+          })}
+        >
+          {icon}
+          <Icon name='arrowDownSFill' size='1rem' />
+        </IconButton>
+      </Tooltip>
+      <Menu {...rest} id={id.current} anchorEl={anchorEl} open={open} onClose={handleClose}>
+        {children}
+      </Menu>
+    </>
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/index.ts b/packages/remirror__react-components/src/buttons/index.ts
new file mode 100644
index 0000000000..58484178c3
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/index.ts
@@ -0,0 +1,20 @@
+export * from './command-button';
+export * from './copy-button';
+export * from './create-table-button';
+export * from './cut-button';
+export * from './dropdown-button';
+export * from './paste-button';
+export * from './redo-button';
+export * from './toggle-blockquote-button';
+export * from './toggle-bold-button';
+export * from './toggle-bullet-list-button';
+export * from './toggle-callout-button';
+export * from './toggle-code-block-button';
+export * from './toggle-code-button';
+export * from './toggle-heading-button';
+export * from './toggle-italic-button';
+export * from './toggle-ordered-list-button';
+export * from './toggle-strike-button';
+export * from './toggle-task-list-button';
+export * from './toggle-underline-button';
+export * from './undo-button';
diff --git a/packages/remirror__react-components/src/buttons/paste-button.tsx b/packages/remirror__react-components/src/buttons/paste-button.tsx
new file mode 100644
index 0000000000..d710534d58
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/paste-button.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { useCommands, useEditorState } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface PasteButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const PasteButton: FC<PasteButtonProps> = (props) => {
+  const { paste } = useCommands();
+  // Force component update on state change
+  useEditorState();
+
+  const handleSelect = useCallback(() => {
+    if (paste.enabled()) {
+      paste();
+    }
+  }, [paste]);
+
+  const enabled = paste.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='paste'
+      active={false}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/redo-button.tsx b/packages/remirror__react-components/src/buttons/redo-button.tsx
new file mode 100644
index 0000000000..c94280e670
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/redo-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useCommands, useHelpers } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface RedoButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const RedoButton: FC<RedoButtonProps> = (props) => {
+  const { redo } = useCommands();
+  const { redoDepth } = useHelpers(true);
+
+  const handleSelect = useCallback(() => {
+    if (redo.enabled()) {
+      redo();
+    }
+  }, [redo]);
+
+  const enabled = redoDepth() > 0;
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='redo'
+      active={false}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-blockquote-button.tsx b/packages/remirror__react-components/src/buttons/toggle-blockquote-button.tsx
new file mode 100644
index 0000000000..e559514d17
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-blockquote-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleBlockquoteButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleBlockquoteButton: FC<ToggleBlockquoteButtonProps> = (props) => {
+  const { toggleBlockquote } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleBlockquote.enabled()) {
+      toggleBlockquote();
+    }
+  }, [toggleBlockquote]);
+
+  const active = useActive().blockquote();
+  const enabled = toggleBlockquote.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleBlockquote'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-bold-button.tsx b/packages/remirror__react-components/src/buttons/toggle-bold-button.tsx
new file mode 100644
index 0000000000..d6749bb7e4
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-bold-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleBoldButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleBoldButton: FC<ToggleBoldButtonProps> = (props) => {
+  const { toggleBold } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleBold.enabled()) {
+      toggleBold();
+    }
+  }, [toggleBold]);
+
+  const active = useActive().bold();
+  const enabled = toggleBold.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleBold'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-bullet-list-button.tsx b/packages/remirror__react-components/src/buttons/toggle-bullet-list-button.tsx
new file mode 100644
index 0000000000..2c2ec43828
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-bullet-list-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleBulletListButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleBulletListButton: FC<ToggleBulletListButtonProps> = (props) => {
+  const { toggleBulletList } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleBulletList.enabled()) {
+      toggleBulletList();
+    }
+  }, [toggleBulletList]);
+
+  const active = useActive().bulletList();
+  const enabled = toggleBulletList.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleBulletList'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-callout-button.tsx b/packages/remirror__react-components/src/buttons/toggle-callout-button.tsx
new file mode 100644
index 0000000000..bde409cb6e
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-callout-button.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+import { ProsemirrorAttributes } from '@remirror/core';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleCalloutButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {
+  attrs?: Partial<ProsemirrorAttributes>;
+}
+
+export const ToggleCalloutButton: FC<ToggleCalloutButtonProps> = ({ attrs = {}, ...rest }) => {
+  const { toggleCallout } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleCallout.enabled(attrs)) {
+      toggleCallout(attrs);
+    }
+  }, [toggleCallout, attrs]);
+
+  const active = useActive().callout(attrs);
+  const enabled = toggleCallout.enabled(attrs);
+
+  return (
+    <CommandButton
+      {...rest}
+      commandName='toggleCallout'
+      active={active}
+      enabled={enabled}
+      attrs={attrs}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-code-block-button.tsx b/packages/remirror__react-components/src/buttons/toggle-code-block-button.tsx
new file mode 100644
index 0000000000..a8347be2b9
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-code-block-button.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+import { ProsemirrorAttributes } from '@remirror/core';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleCodeBlockButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {
+  attrs?: Partial<ProsemirrorAttributes>;
+}
+
+export const ToggleCodeBlockButton: FC<ToggleCodeBlockButtonProps> = ({ attrs = {}, ...rest }) => {
+  const { toggleCodeBlock } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleCodeBlock.enabled(attrs)) {
+      toggleCodeBlock(attrs);
+    }
+  }, [toggleCodeBlock, attrs]);
+
+  const active = useActive().codeBlock();
+  const enabled = toggleCodeBlock.enabled(attrs);
+
+  return (
+    <CommandButton
+      {...rest}
+      commandName='toggleCodeBlock'
+      active={active}
+      enabled={enabled}
+      attrs={attrs}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-code-button.tsx b/packages/remirror__react-components/src/buttons/toggle-code-button.tsx
new file mode 100644
index 0000000000..bff51dd930
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-code-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleCodeButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleCodeButton: FC<ToggleCodeButtonProps> = (props) => {
+  const { toggleCode } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleCode.enabled()) {
+      toggleCode();
+    }
+  }, [toggleCode]);
+
+  const active = useActive().code();
+  const enabled = toggleCode.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleCode'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-heading-button.tsx b/packages/remirror__react-components/src/buttons/toggle-heading-button.tsx
new file mode 100644
index 0000000000..b54a901d58
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-heading-button.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+import { ProsemirrorAttributes } from '@remirror/core';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleHeadingButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {
+  attrs?: Partial<ProsemirrorAttributes>;
+}
+
+export const ToggleHeadingButton: FC<ToggleHeadingButtonProps> = ({ attrs, ...rest }) => {
+  const { toggleHeading } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleHeading.enabled(attrs)) {
+      toggleHeading(attrs);
+    }
+  }, [toggleHeading, attrs]);
+
+  const active = useActive().heading(attrs);
+  const enabled = toggleHeading.enabled(attrs);
+
+  return (
+    <CommandButton
+      {...rest}
+      commandName='toggleHeading'
+      active={active}
+      enabled={enabled}
+      attrs={attrs}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-italic-button.tsx b/packages/remirror__react-components/src/buttons/toggle-italic-button.tsx
new file mode 100644
index 0000000000..b22d84597b
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-italic-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleItalicButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleItalicButton: FC<ToggleItalicButtonProps> = (props) => {
+  const { toggleItalic } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleItalic.enabled()) {
+      toggleItalic();
+    }
+  }, [toggleItalic]);
+
+  const active = useActive().italic();
+  const enabled = toggleItalic.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleItalic'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-ordered-list-button.tsx b/packages/remirror__react-components/src/buttons/toggle-ordered-list-button.tsx
new file mode 100644
index 0000000000..6a6e6623ef
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-ordered-list-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleOrderedListButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleOrderedListButton: FC<ToggleOrderedListButtonProps> = (props) => {
+  const { toggleOrderedList } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleOrderedList.enabled()) {
+      toggleOrderedList();
+    }
+  }, [toggleOrderedList]);
+
+  const active = useActive().orderedList();
+  const enabled = toggleOrderedList.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleOrderedList'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-strike-button.tsx b/packages/remirror__react-components/src/buttons/toggle-strike-button.tsx
new file mode 100644
index 0000000000..16b69901a0
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-strike-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleStrikeButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleStrikeButton: FC<ToggleStrikeButtonProps> = (props) => {
+  const { toggleStrike } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleStrike.enabled()) {
+      toggleStrike();
+    }
+  }, [toggleStrike]);
+
+  const active = useActive().strike();
+  const enabled = toggleStrike.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleStrike'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-task-list-button.tsx b/packages/remirror__react-components/src/buttons/toggle-task-list-button.tsx
new file mode 100644
index 0000000000..bb90e91d33
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-task-list-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleTaskListButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleTaskListButton: FC<ToggleTaskListButtonProps> = (props) => {
+  const { toggleTaskList } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleTaskList.enabled()) {
+      toggleTaskList();
+    }
+  }, [toggleTaskList]);
+
+  const active = useActive().taskList();
+  const enabled = toggleTaskList.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleTaskList'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/toggle-underline-button.tsx b/packages/remirror__react-components/src/buttons/toggle-underline-button.tsx
new file mode 100644
index 0000000000..799e3978a0
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/toggle-underline-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface ToggleUnderlineButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const ToggleUnderlineButton: FC<ToggleUnderlineButtonProps> = (props) => {
+  const { toggleUnderline } = useCommands();
+
+  const handleSelect = useCallback(() => {
+    if (toggleUnderline.enabled()) {
+      toggleUnderline();
+    }
+  }, [toggleUnderline]);
+
+  const active = useActive().underline();
+  const enabled = toggleUnderline.enabled();
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='toggleUnderline'
+      active={active}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/buttons/undo-button.tsx b/packages/remirror__react-components/src/buttons/undo-button.tsx
new file mode 100644
index 0000000000..101b039065
--- /dev/null
+++ b/packages/remirror__react-components/src/buttons/undo-button.tsx
@@ -0,0 +1,30 @@
+import React, { FC, useCallback } from 'react';
+import { useCommands, useHelpers } from '@remirror/react-core';
+
+import { CommandButton, CommandButtonProps } from './command-button';
+
+export interface UndoButtonProps
+  extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {}
+
+export const UndoButton: FC<UndoButtonProps> = (props) => {
+  const { undo } = useCommands();
+  const { undoDepth } = useHelpers(true);
+
+  const handleSelect = useCallback(() => {
+    if (undo.enabled()) {
+      undo();
+    }
+  }, [undo]);
+
+  const enabled = undoDepth() > 0;
+
+  return (
+    <CommandButton
+      {...props}
+      commandName='undo'
+      active={false}
+      enabled={enabled}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/components/color-picker-component.tsx b/packages/remirror__react-components/src/components/color-picker-component.tsx
deleted file mode 100644
index 540f0c50ba..0000000000
--- a/packages/remirror__react-components/src/components/color-picker-component.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * @module
- *
- * A color picker component which is used for menus.
- */
-import type { FC, PropsWithChildren } from 'react';
-import React, { useCallback } from 'react';
-import {
-  Composite,
-  CompositeGroup,
-  CompositeItem,
-  CompositeStateReturn,
-  Tooltip,
-  TooltipReference,
-  useCompositeState,
-  useTooltipState,
-} from 'reakit';
-import { cx } from '@remirror/core';
-import { HuePalette, Palette, palette as defaultPalette } from '@remirror/extension-text-color';
-import { useI18n } from '@remirror/react-core';
-import { ComponentsTheme } from '@remirror/theme';
-
-export interface ColorPickerProps {
-  /**
-   * The currently selected color if active.
-   */
-  selectedColor?: string;
-
-  /**
-   * Called when a color is selected.
-   */
-  onSelect: (color: string) => void;
-
-  /**
-   * The color palette to use.
-   */
-  palette?: Palette;
-}
-
-export const ColorPickerComponent = (props: ColorPickerProps): JSX.Element => {
-  const { palette = defaultPalette, onSelect, selectedColor } = props;
-  const { t } = useI18n();
-  const compositeState = useCompositeState({ loop: true });
-  const { black, transparent, white, hues } = palette(t);
-
-  return (
-    <Grid compositeState={compositeState}>
-      <GridRow compositeState={compositeState}>
-        <GridCell
-          {...black}
-          compositeState={compositeState}
-          selected={black.color === selectedColor}
-          onSelect={onSelect}
-        />
-        <GridCell
-          {...white}
-          compositeState={compositeState}
-          selected={white.color === selectedColor}
-          onSelect={onSelect}
-        />
-        <GridCell
-          {...transparent}
-          compositeState={compositeState}
-          selected={transparent.color === selectedColor}
-          onSelect={onSelect}
-        />
-      </GridRow>
-      {Object.values(hues).map((hueMap, index) => (
-        <ColorPickerHue
-          {...hueMap}
-          compositeState={compositeState}
-          selectedColor={selectedColor}
-          onSelect={onSelect}
-          key={index}
-        />
-      ))}
-    </Grid>
-  );
-};
-
-interface ColorPickerHue extends HuePalette, CompositeStateProps {
-  selectedColor?: string;
-  /**
-   * Called when a color is selected.
-   */
-  onSelect: (color: string) => void;
-}
-
-const ColorPickerHue = (props: ColorPickerHue) => {
-  const { label, hues, compositeState, selectedColor, onSelect } = props;
-
-  return (
-    <>
-      {label}
-      <GridRow compositeState={compositeState}>
-        {hues.map((hue, index) => (
-          <GridCell
-            {...hue}
-            compositeState={compositeState}
-            selected={hue.color === selectedColor}
-            onSelect={onSelect}
-            key={index}
-          />
-        ))}
-      </GridRow>
-    </>
-  );
-};
-
-const Grid: FC<PropsWithChildren<CompositeStateProps>> = (props) => {
-  return (
-    <Composite role='grid' {...props.compositeState}>
-      {props.children}
-    </Composite>
-  );
-};
-
-interface CompositeStateProps {
-  compositeState: CompositeStateReturn;
-}
-
-const GridRow: FC<PropsWithChildren<CompositeStateProps>> = (props) => {
-  return (
-    <CompositeGroup role='row' {...props.compositeState}>
-      {props.children}
-    </CompositeGroup>
-  );
-};
-
-interface GridCellProps extends CompositeStateProps {
-  /**
-   * Called when a color is selected.
-   */
-  onSelect: (color: string) => void;
-  className?: string;
-  color: string;
-  label: string;
-  selected: boolean;
-}
-
-const GridCell = (props: GridCellProps) => {
-  const { color, label, selected, compositeState, onSelect, className } = props;
-  const tooltipState = useTooltipState({ gutter: 5 });
-  const onClick = useCallback(() => onSelect(color), [color, onSelect]);
-
-  return (
-    <>
-      <TooltipReference {...tooltipState}>
-        <CompositeItem
-          as='div'
-          role='gridcell'
-          {...compositeState}
-          style={{ backgroundColor: color }}
-          className={cx(
-            ComponentsTheme.COLOR_PICKER_CELL,
-            className,
-            selected && ComponentsTheme.COLOR_PICKER_CELL_SELECTED,
-          )}
-          onClick={onClick}
-        />
-      </TooltipReference>
-      <Tooltip {...tooltipState}>{label}</Tooltip>
-    </>
-  );
-};
diff --git a/packages/remirror__react-components/src/components/command-icon-component.tsx b/packages/remirror__react-components/src/components/command-icon-component.tsx
deleted file mode 100644
index 69d6cbfaec..0000000000
--- a/packages/remirror__react-components/src/components/command-icon-component.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { Box } from 'reakit';
-import { CommandUiIcon, isString } from '@remirror/core';
-import { CoreIcon } from '@remirror/icons';
-
-import { Icon } from '../icons';
-
-interface CommandIconProps {
-  icon: CoreIcon | CommandUiIcon;
-  wrapperClass?: string;
-}
-
-export const CommandIconComponent = (props: CommandIconProps): JSX.Element => {
-  const { icon, wrapperClass } = props;
-
-  if (isString(icon)) {
-    return <Icon name={icon} />;
-  }
-
-  // Render when the icon is a complex icon.
-  return (
-    <Box as='span' className={wrapperClass}>
-      {icon.sup && icon.sup}
-      <Icon name={icon.name} />
-      {icon.sub && icon.sub}
-    </Box>
-  );
-};
diff --git a/packages/remirror__react-components/src/components/dialog-component.tsx b/packages/remirror__react-components/src/components/dialog-component.tsx
deleted file mode 100644
index 9eced1028e..0000000000
--- a/packages/remirror__react-components/src/components/dialog-component.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { FC, PropsWithChildren, useEffect } from 'react';
-import { Dialog, DialogBackdrop, useDialogState } from 'reakit';
-
-import { useTheme, UseThemeProps } from '../providers';
-import { usePrevious } from './use-previous';
-
-interface ControlledDialogProps {
-  visible: boolean;
-  onUpdate: (visible: boolean) => void;
-  backdrop?: boolean;
-}
-
-/**
- * A controlled version of the Reakit `Dialog` component.
- */
-export const ControlledDialogComponent: FC<PropsWithChildren<ControlledDialogProps>> = (props) => {
-  const { visible, children, backdrop = false, onUpdate } = props;
-  const previousVisible = usePrevious(visible);
-  const dialogState = useDialogState({ visible, modal: false });
-  const themeProps = useTheme({});
-
-  useEffect(() => {
-    if (visible !== previousVisible) {
-      if (visible) {
-        dialogState.show();
-      } else {
-        dialogState.hide();
-      }
-
-      return;
-    }
-
-    if (visible !== dialogState.visible) {
-      onUpdate(dialogState.visible);
-    }
-  }, [onUpdate, previousVisible, visible, dialogState]);
-
-  const dialog = (
-    // <Portal>
-    <Dialog
-      {...dialogState}
-      role='alertdialog'
-      tabIndex={0}
-      style={themeProps.style}
-      unstable_autoFocusOnHide={false}
-      unstable_autoFocusOnShow={false}
-      // unstable_={false}
-    >
-      <Themed>{children}</Themed>
-    </Dialog>
-    // </Portal>
-  );
-
-  return backdrop ? <DialogBackdrop {...dialogState}>{dialog}</DialogBackdrop> : dialog;
-};
-
-const Themed: FC<PropsWithChildren<UseThemeProps>> = (props) => {
-  const { children, ...themeProps } = props;
-  const { style, className } = useTheme(themeProps);
-
-  return (
-    <div style={style} className={className}>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/remirror__react-components/src/components/index.ts b/packages/remirror__react-components/src/components/index.ts
deleted file mode 100644
index 4da7d5cdcf..0000000000
--- a/packages/remirror__react-components/src/components/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './color-picker-component';
-export * from './command-icon-component';
-export * from './dialog-component';
-export * from './emoji-popup-component';
-export * from './mention-atom-popup-component';
-export * from './table-size-editor-component';
diff --git a/packages/remirror__react-components/src/components/table-size-editor-component.tsx b/packages/remirror__react-components/src/components/table-size-editor-component.tsx
deleted file mode 100644
index d46e57ffdf..0000000000
--- a/packages/remirror__react-components/src/components/table-size-editor-component.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-/**
- * @module
- *
- * A grid size component for creating a table of a specific size into the
- * editor.
- */
-import type { ComponentType, MouseEvent as ReactMouseEvent } from 'react';
-import React, { createRef, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-import { clamp, cx } from '@remirror/core';
-import { Rect } from '@remirror/extension-positioner';
-import { ComponentsTheme } from '@remirror/theme';
-
-/**
- * The component used to insert a table into the editor of a given size.
- */
-export const TableSizeEditorComponent = ({
-  MetricsComponent,
-  ...props
-}: TableSizeEditorProps): JSX.Element => {
-  const [state, setState] = useState<SelectTableSizeState>({ columns: 1, rows: 1 });
-  const instance = useRef(new TableSizeRef({ props, state, setState }));
-  instance.current.props = props;
-  instance.current.state = state;
-
-  useEffect(() => {
-    return instance.current.unmount;
-  }, []);
-
-  let rows = Math.max(5, state.rows);
-  let columns = Math.max(5, state.columns);
-
-  if (rows === state.rows) {
-    rows = Math.min(MAX_SIZE, rows + 1);
-  }
-
-  if (columns === state.columns) {
-    columns = Math.min(MAX_SIZE, columns + 1);
-  }
-
-  const cells = [];
-  let ii = 0;
-  let y = 0;
-  let width = 0;
-  let height = 0;
-
-  while (ii < rows) {
-    y += GUTTER_SIZE;
-    let jj = 0;
-    let x = 0;
-
-    while (jj < columns) {
-      x += GUTTER_SIZE;
-      const selected = ii < rows && jj < columns;
-      cells.push(
-        <TableSizeEditorCell key={`${String(ii)}-${String(jj)}`} selected={selected} x={x} y={y} />,
-      );
-      x += CELL_SIZE;
-      width = x + GUTTER_SIZE;
-      jj++;
-    }
-
-    y += CELL_SIZE;
-    height = y + GUTTER_SIZE;
-    ii++;
-  }
-
-  const metrics = MetricsComponent ? (
-    <MetricsComponent rows={rows} columns={columns} />
-  ) : (
-    `${rows} x ${columns}`
-  );
-
-  return (
-    <div className={ComponentsTheme.TABLE_SIZE_EDITOR} ref={instance.current.ref}>
-      <div
-        className={ComponentsTheme.TABLE_SIZE_EDITOR_BODY}
-        onMouseDown={instance.current.onMouseDown}
-        onMouseEnter={instance.current.onMouseEnter}
-        style={{ width, height }}
-      >
-        {cells}
-      </div>
-      <div className={ComponentsTheme.TABLE_SIZE_EDITOR_FOOTER}>{metrics}</div>
-    </div>
-  );
-};
-
-const GUTTER_SIZE = 5;
-const CELL_SIZE = 16;
-const MAX_SIZE = 20;
-
-interface TableSizeEditorCellProps {
-  x: number;
-  y: number;
-  selected: boolean;
-}
-
-const TableSizeEditorCell = (props: TableSizeEditorCellProps): JSX.Element => {
-  return (
-    <div
-      className={cx(
-        ComponentsTheme.TABLE_SIZE_EDITOR_CELL,
-        props.selected && ComponentsTheme.TABLE_SIZE_EDITOR_CELL_SELECTED,
-      )}
-      style={{ top: props.y, left: props.x }}
-    />
-  );
-};
-
-interface SelectTableSizeState {
-  columns: number;
-  rows: number;
-}
-
-type SelectTableSizeCallback = (selected: SelectTableSizeState) => void;
-
-export interface TableSizeEditorProps {
-  /**
-   * Called when a cell is selected.
-   */
-  onSelect: SelectTableSizeCallback;
-
-  /**
-   * Create a custom display for the metric component.
-   */
-  MetricsComponent?: ComponentType<SelectTableSizeState>;
-}
-
-interface TableSizeRefProps {
-  props: TableSizeEditorProps;
-  state: SelectTableSizeState;
-  setState: Dispatch<SetStateAction<SelectTableSizeState>>;
-}
-
-class TableSizeRef {
-  #targetX = 0;
-  #targetY = 0;
-  #mouseX = 0;
-  #mouseY = 0;
-  #animationFrame = 0;
-  #entered = false;
-
-  readonly ref = createRef<HTMLDivElement>();
-  readonly setState: Dispatch<SetStateAction<SelectTableSizeState>>;
-
-  props: TableSizeEditorProps;
-  state: SelectTableSizeState;
-
-  constructor({ props, state, setState }: TableSizeRefProps) {
-    this.props = props;
-    this.state = state;
-    this.setState = setState;
-  }
-
-  unmount(): void {
-    if (this.#entered) {
-      document.removeEventListener('mousemove', this.onMouseMove, true);
-    }
-
-    if (this.#animationFrame) {
-      cancelAnimationFrame(this.#animationFrame);
-    }
-  }
-
-  readonly onMouseEnter = (event: ReactMouseEvent<HTMLElement, MouseEvent>): void => {
-    const node = event.currentTarget;
-
-    if (node instanceof HTMLElement) {
-      const rect = fromHtmlElement(node);
-      const mouseX = Math.round(event.clientX);
-      const mouseY = Math.round(event.clientY);
-      this.#targetX = rect.x;
-      this.#targetY = rect.y;
-      this.#mouseX = mouseX;
-      this.#mouseY = mouseY;
-
-      if (!this.#entered) {
-        this.#entered = true;
-        document.addEventListener('mousemove', this.onMouseMove, true);
-      }
-    }
-  };
-
-  private readonly onMouseMove = (event: MouseEvent): void => {
-    if (this.ref.current) {
-      const elementRect = htmlElementToRect(this.ref.current);
-      const mouseRect = fromXY(event.screenX, event.screenY, 10);
-
-      if (isIntersected(elementRect, mouseRect, 50)) {
-        // This prevents `Reakit` from collapsing the editor`.
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }
-
-    const mouseX = Math.round(event.clientX);
-    const mouseY = Math.round(event.clientY);
-
-    if (mouseX !== this.#mouseX || mouseY !== this.#mouseY) {
-      this.#mouseX = mouseX;
-      this.#mouseY = mouseY;
-      this.#animationFrame && cancelAnimationFrame(this.#animationFrame);
-      this.#animationFrame = requestAnimationFrame(this.updateGridSize);
-    }
-  };
-
-  readonly onMouseDown = (event: ReactMouseEvent<HTMLElement, MouseEvent>): void => {
-    event.preventDefault();
-    this.props.onSelect(this.state);
-  };
-
-  private readonly updateGridSize = (): void => {
-    this.#animationFrame = 0;
-    const x = this.#mouseX - this.#targetX;
-    const y = this.#mouseY - this.#targetY;
-    const rows = clamp({ min: 1, max: MAX_SIZE, value: Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)) });
-    const columns = clamp({
-      min: 1,
-      max: MAX_SIZE,
-      value: Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)),
-    });
-
-    if (this.state.rows !== rows || this.state.columns !== columns) {
-      this.setState({ rows: rows, columns: columns });
-    }
-  };
-}
-
-function fromHtmlElement(element: HTMLElement): Rect {
-  const display = document.defaultView?.getComputedStyle(element).display;
-
-  if (display === 'contents' && element.children.length === 1) {
-    // el has no layout at all, use its children instead.
-    return fromHtmlElement(element.children[0] as HTMLElement);
-  }
-
-  return htmlElementToRect(element);
-}
-
-function htmlElementToRect(element: HTMLElement): Rect {
-  const rect = element.getBoundingClientRect();
-
-  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
-}
-
-function isIntersected(r1: Rect, r2: Rect, padding = 0): boolean {
-  return !(
-    r2.x - padding > r1.x + r1.width + padding ||
-    r2.x + r2.width + padding < r1.x - padding ||
-    r2.y - padding > r1.y + r1.height + padding ||
-    r2.y + r2.height + padding < r1.y - padding
-  );
-}
-
-function fromXY(x: number, y: number, padding = 0): Rect {
-  return { x: x - padding, y: y - padding, width: padding * 2, height: padding * 2 };
-}
diff --git a/packages/remirror__react-components/src/components/use-previous.ts b/packages/remirror__react-components/src/components/use-previous.ts
deleted file mode 100644
index 1bf9b64ec8..0000000000
--- a/packages/remirror__react-components/src/components/use-previous.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useRef } from 'react';
-
-import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
-
-export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
-  useIsomorphicLayoutEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
diff --git a/packages/remirror__react-components/src/floating-menu.tsx b/packages/remirror__react-components/src/floating-menu.tsx
index db335fea4f..0ebdfc40b0 100644
--- a/packages/remirror__react-components/src/floating-menu.tsx
+++ b/packages/remirror__react-components/src/floating-menu.tsx
@@ -1,31 +1,15 @@
 import { Placement } from '@popperjs/core';
-import { matchSorter } from 'match-sorter';
 import React, { FC, PropsWithChildren, ReactChild, Ref, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { useMenuState } from 'reakit';
-import { cx, Except } from '@remirror/core';
+import { cx } from '@remirror/core';
 import type { PositionerParam } from '@remirror/extension-positioner';
 import { getPositioner } from '@remirror/extension-positioner';
 import { useHelpers } from '@remirror/react-core';
-import {
-  useEditorFocus,
-  UseEditorFocusProps,
-  usePositioner,
-  useSuggest,
-} from '@remirror/react-hooks';
+import { useEditorFocus, UseEditorFocusProps, usePositioner } from '@remirror/react-hooks';
 import { ComponentsTheme, ExtensionPositionerTheme } from '@remirror/theme';
 
 import { composeRefs } from './commonjs-packages/seznam-compose-react-refs';
-import { useIsomorphicLayoutEffect } from './components/use-isomorphic-layout-effect';
-import { MenuComponent } from './menu';
-import {
-  ComponentItem,
-  MenuActionItemUnion,
-  MenuCommandPaneItem,
-  MenuPaneItem,
-  ToolbarItem,
-} from './react-component-types';
-import { Toolbar } from './toolbar';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 import { usePopper } from './use-popper';
 
 interface BaseFloatingPositioner extends UseEditorFocusProps {
@@ -175,40 +159,6 @@ export const FloatingWrapper: FC<PropsWithChildren<FloatingWrapperProps>> = (
   );
 };
 
-interface FloatingToolbarProps extends Except<ToolbarItem, 'type'>, FloatingWrapperProps {}
-
-export const FloatingToolbar = (props: FloatingToolbarProps): JSX.Element => {
-  const {
-    placement,
-    positioner,
-    animated = 200,
-    animatedClass = ComponentsTheme.ANIMATED_POPOVER,
-    containerClass,
-    blurOnInactive,
-    enabled,
-    floatingLabel,
-    ignoredElements,
-    ...toolbarProps
-  } = props;
-  const floatingWrapperProps = {
-    placement,
-    positioner,
-    animated,
-    animatedClass,
-    containerClass,
-    blurOnInactive,
-    enabled,
-    floatingLabel,
-    ignoredElements,
-  };
-
-  return (
-    <FloatingWrapper {...floatingWrapperProps}>
-      <Toolbar {...toolbarProps} refocusEditor={false} />
-    </FloatingWrapper>
-  );
-};
-
 export interface PositionerComponentProps {
   children: ReactChild;
 }
@@ -223,53 +173,53 @@ export const PositionerPortal: FC<PositionerComponentProps> = (props) => {
   return createPortal(<>{props.children}</>, container);
 };
 
-interface FloatingActionsMenuProps extends Partial<FloatingWrapperProps> {
-  actions: MenuActionItemUnion[];
-}
+// interface FloatingActionsMenuProps extends Partial<FloatingWrapperProps> {
+//   actions: MenuActionItemUnion[];
+// }
 
 /**
  * Respond to user queries in the editor.
  */
-export const FloatingActionsMenu = (props: FloatingActionsMenuProps): JSX.Element => {
-  const {
-    actions,
-    animated = false,
-    placement = 'right-end',
-    positioner = 'nearestWord',
-    blurOnInactive,
-    ignoredElements,
-    enabled = true,
-    ...floatingWrapperProps
-  } = props;
-  const { change } = useSuggest({ char: '/', name: 'actions-dropdown', matchOffset: 0 });
-  const query = change?.query.full;
-  const menuState = useMenuState({ unstable_virtual: true, wrap: true, loop: true });
-
-  const items = (
-    query
-      ? matchSorter(actions, query, {
-          keys: ['tags', 'description', (item) => item.description?.replace(/\W/g, '') ?? ''],
-          threshold: matchSorter.rankings.CONTAINS,
-        })
-      : actions
-  ).map<MenuPaneItem | MenuCommandPaneItem>((item) =>
-    item.type === ComponentItem.MenuAction
-      ? { ...item, type: ComponentItem.MenuPane }
-      : { ...item, type: ComponentItem.MenuCommandPane },
-  );
-
-  return (
-    <FloatingWrapper
-      enabled={!!query}
-      positioner={positioner}
-      placement={placement}
-      animated={animated}
-      blurOnInactive={blurOnInactive}
-      ignoredElements={ignoredElements}
-      {...floatingWrapperProps}
-    >
-      <div style={{ width: 50, height: 50, background: 'red' }} />
-      <MenuComponent open={!!query && enabled} items={items} menuState={menuState} />
-    </FloatingWrapper>
-  );
-};
+// export const FloatingActionsMenu = (props: FloatingActionsMenuProps): JSX.Element => {
+//   const {
+//     actions,
+//     animated = false,
+//     placement = 'right-end',
+//     positioner = 'nearestWord',
+//     blurOnInactive,
+//     ignoredElements,
+//     enabled = true,
+//     ...floatingWrapperProps
+//   } = props;
+//   const { change } = useSuggest({ char: '/', name: 'actions-dropdown', matchOffset: 0 });
+//   const query = change?.query.full;
+//   const menuState = useMenuState({ unstable_virtual: true, wrap: true, loop: true });
+//
+//   const items = (
+//     query
+//       ? matchSorter(actions, query, {
+//           keys: ['tags', 'description', (item) => item.description?.replace(/\W/g, '') ?? ''],
+//           threshold: matchSorter.rankings.CONTAINS,
+//         })
+//       : actions
+//   ).map<MenuPaneItem | MenuCommandPaneItem>((item) =>
+//     item.type === ComponentItem.MenuAction
+//       ? { ...item, type: ComponentItem.MenuPane }
+//       : { ...item, type: ComponentItem.MenuCommandPane },
+//   );
+//
+//   return (
+//     <FloatingWrapper
+//       enabled={!!query}
+//       positioner={positioner}
+//       placement={placement}
+//       animated={animated}
+//       blurOnInactive={blurOnInactive}
+//       ignoredElements={ignoredElements}
+//       {...floatingWrapperProps}
+//     >
+//       <div style={{ width: 50, height: 50, background: 'red' }} />
+//       <MenuComponent open={!!query && enabled} items={items} menuState={menuState} />
+//     </FloatingWrapper>
+//   );
+// };
diff --git a/packages/remirror__react-components/src/icons/all.ts b/packages/remirror__react-components/src/icons/all.ts
index bb775ccee2..dea6647817 100644
--- a/packages/remirror__react-components/src/icons/all.ts
+++ b/packages/remirror__react-components/src/icons/all.ts
@@ -359,7 +359,6 @@ import {
   checkboxMultipleBlankFill,
   checkboxMultipleBlankLine,
   checkboxMultipleFill,
-  checkboxMultipleLine,
   checkDoubleFill,
   checkDoubleLine,
   checkFill,
@@ -5059,14 +5058,6 @@ export const CheckboxMultipleFillIcon: IconType = (props) => {
   return GenIcon(checkboxMultipleFill)(props);
 };
 
-/**
- * The react component for the `checkbox-multiple-line.svg` icon created by [RemixIcons](https://remixicons.com).
- * ![Checkbox Multiple Line Icon](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
- */
-export const CheckboxMultipleLineIcon: IconType = (props) => {
-  return GenIcon(checkboxMultipleLine)(props);
-};
-
 /**
  * The react component for the `china-railway-fill.svg` icon created by [RemixIcons](https://remixicons.com).
  * ![China Railway Fill Icon](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Map/china-railway-fill.svg)
diff --git a/packages/remirror__react-components/src/icons/core.ts b/packages/remirror__react-components/src/icons/core.ts
index a33a4ebc5d..03f389a519 100644
--- a/packages/remirror__react-components/src/icons/core.ts
+++ b/packages/remirror__react-components/src/icons/core.ts
@@ -27,6 +27,7 @@ import {
   bringToFront,
   chatNewLine,
   checkboxCircleLine,
+  checkboxMultipleLine,
   clipboardFill,
   clipboardLine,
   closeCircleLine,
@@ -358,6 +359,14 @@ export const CheckboxCircleLineIcon: IconType = (props) => {
   return GenIcon(checkboxCircleLine)(props);
 };
 
+/**
+ * The react component for the `checkbox-multiple-line.svg` icon created by [RemixIcons](https://remixicons.com).
+ * ![Checkbox Multiple Line Icon](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
+ */
+export const CheckboxMultipleLineIcon: IconType = (props) => {
+  return GenIcon(checkboxMultipleLine)(props);
+};
+
 /**
  * The react component for the `clipboard-fill.svg` icon created by [RemixIcons](https://remixicons.com).
  * ![Clipboard Fill Icon](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Document/clipboard-fill.svg)
diff --git a/packages/remirror__react-components/src/index.ts b/packages/remirror__react-components/src/index.ts
index fe20da92b1..601c532672 100644
--- a/packages/remirror__react-components/src/index.ts
+++ b/packages/remirror__react-components/src/index.ts
@@ -1,9 +1,8 @@
-export * from './components';
+export * from './button-groups';
+export * from './buttons';
 export * from './floating-menu';
 export * from './icons/icons-base';
-export * from './menu';
+export * from './menus';
+export * from './popups';
 export * from './providers';
-export * from './react-component-types';
 export * from './toolbar';
-export type { ButtonProps } from 'reakit';
-export { Button } from 'reakit';
diff --git a/packages/remirror__react-components/src/menu/index.tsx b/packages/remirror__react-components/src/menu/index.tsx
deleted file mode 100644
index 8f482e9912..0000000000
--- a/packages/remirror__react-components/src/menu/index.tsx
+++ /dev/null
@@ -1,422 +0,0 @@
-/**
- * @module
- *
- * The builtin menus.
- */
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import React, { forwardRef, useEffect, useRef } from 'react';
-import type { MenuBarStateReturn, MenuStateReturn } from 'reakit';
-import {
-  Box,
-  Menu as ReakitMenu,
-  MenuBar as ReakitMenuBar,
-  MenuButton as ReakitMenuButton,
-  MenuGroup as ReakitMenuGroup,
-  MenuItem as ReakitMenuItem,
-  MenuSeparator,
-  Tooltip,
-  TooltipReference,
-  useMenuBarState,
-  useMenuState,
-  useTooltipState,
-} from 'reakit';
-import type { AnyExtension, CommandDecoratorMessageProps } from '@remirror/core';
-import { cx, ErrorConstant, includes, invariant, isString } from '@remirror/core';
-import {
-  useActive,
-  useChainedCommands,
-  useCommands,
-  useHelpers,
-  useI18n,
-  useRemirrorContext,
-} from '@remirror/react-core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { CommandIconComponent } from '../components';
-import { useTheme } from '../providers';
-import {
-  ComponentItem,
-  MenuBarGroupItem,
-  MenuBarItem,
-  MenuCommandPaneItem,
-  MenuDropdownItem,
-  MenuGroupItem,
-  MenuPaneItem,
-  MenuSeparatorItem,
-} from '../react-component-types';
-import {
-  getCommandOptionValue,
-  getShortcutString,
-  getUiShortcutString,
-} from '../react-component-utils';
-
-interface MenuGroupProps extends BaseMenuProps {
-  item: MenuGroupItem;
-}
-
-const MenuGroup = (props: MenuGroupProps) => {
-  const { menuState, item: group } = props;
-  const { items, label, role, separator } = group;
-  const startSeparator = includes(['start', 'both'], separator) && <MenuSeparator {...menuState} />;
-  const endSeparator = includes(['end', 'both'], separator) && <MenuSeparator {...menuState} />;
-
-  return (
-    <>
-      {startSeparator}
-      <ReakitMenuGroup {...menuState} aria-label={label}>
-        {items.map((item, index) => {
-          switch (item.type) {
-            case ComponentItem.MenuPane:
-              return <MenuPane menuState={menuState} item={item} key={index} />;
-
-            case ComponentItem.MenuCommandPane:
-              return <MenuCommandPane menuState={menuState} item={item} role={role} key={index} />;
-
-            case ComponentItem.MenuDropdown:
-              return <MenuDropdown item={item} menuState={menuState} key={index} />;
-          }
-        })}
-      </ReakitMenuGroup>
-      {endSeparator}
-    </>
-  );
-};
-
-interface MenuPaneProps extends BaseMenuBarProps {
-  item: MenuPaneItem;
-}
-
-const MenuPane = (props: MenuPaneProps): JSX.Element => {
-  return <ReakitMenuItem {...props.menuState} />;
-};
-
-interface MenuCommandPaneProps extends BaseMenuBarProps {
-  item: MenuCommandPaneItem;
-  autoFocus?: boolean;
-  role?: 'radio' | 'checkbox';
-}
-
-const MenuCommandPane = (props: MenuCommandPaneProps): JSX.Element => {
-  // Gather all the hooks used for this component.
-  const context = useRemirrorContext();
-  const { menuState, item, role } = props;
-  const commands = useCommands();
-  const chain = useChainedCommands();
-  const { getCommandOptions } = useHelpers();
-  const { t } = useI18n();
-  const autoFocus = item.refocusEditor ?? props.autoFocus ?? false;
-
-  // Will cause the editor to rerender for each state update.
-  const active = useActive<AnyExtension>();
-  const { commandName, attrs, displayShortcut = true } = item;
-  const options = getCommandOptions(commandName);
-
-  if (!options) {
-    return <span>Not found: {commandName}</span>;
-  }
-
-  const enabled = commands[commandName]?.isEnabled(attrs) ?? false;
-  const isActive = active[options.name]?.(attrs) ?? false;
-  const commandProps: CommandDecoratorMessageProps = { active: isActive, attrs, enabled, t };
-  const label = getCommandOptionValue(options.label, commandProps);
-  const icon = getCommandOptionValue(options.icon, commandProps);
-  const shortcutString =
-    displayShortcut && options.shortcut
-      ? `${getShortcutString(getUiShortcutString(options.shortcut, attrs ?? {}), { t })}`
-      : undefined;
-  const onClick = (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (item.onClick) {
-      item.onClick(event, context);
-      return;
-    }
-
-    if (options.disableChaining) {
-      commands[commandName]?.(attrs);
-      return;
-    }
-
-    const command = chain[commandName]?.(attrs);
-
-    if (autoFocus) {
-      command?.focus?.();
-    }
-
-    command?.run();
-  };
-
-  return (
-    <BaseMenuPane
-      menuState={menuState}
-      disabled={!enabled}
-      focusable={enabled}
-      onClick={onClick}
-      active={isActive}
-      role={role}
-    >
-      {icon && (
-        <Box as='span' className={ComponentsTheme.MENU_PANE_ICON}>
-          <CommandIconComponent icon={icon} />
-        </Box>
-      )}
-      <Box as='span' className={ComponentsTheme.MENU_PANE_LABEL}>
-        {label}
-      </Box>
-      {shortcutString && (
-        <Box as='span' className={ComponentsTheme.MENU_PANE_SHORTCUT}>
-          {shortcutString}
-        </Box>
-      )}
-    </BaseMenuPane>
-  );
-};
-
-// type MenuDropdownProps = SubMenuDropdownProps | MenuBarDropdownProps;
-
-interface MenuDropdownProps extends BaseMenuBarProps {
-  item: MenuDropdownItem;
-}
-
-const MenuDropdown = (props: MenuDropdownProps): JSX.Element => {
-  const { menuState, item } = props;
-  const { items, label, menuLabel } = item;
-
-  return (
-    <ReakitMenuItem
-      as={DropdownComponent}
-      {...menuState}
-      menuItems={items}
-      label={label}
-      menuLabel={menuLabel}
-    />
-  );
-};
-
-interface DropdownComponentProps
-  extends Omit<MenuDropdownItem, 'type' | 'items'>,
-    Partial<MenuStateReturn> {
-  menuItems: Array<
-    MenuPaneItem | MenuSeparatorItem | MenuCommandPaneItem | MenuGroupItem | MenuDropdownItem
-  >;
-}
-
-/**
- * A dropdown menu which can be composed together with other dropdown menus.
- */
-export const DropdownComponent = forwardRef<HTMLButtonElement, DropdownComponentProps>(
-  (props, ref) => {
-    const menuState = useMenuState();
-    const { menuItems, label: Label, menuLabel, icon, ...rest } = props;
-
-    let labelElement: ReactNode | undefined;
-    let label: string | undefined = menuLabel;
-
-    if (isString(Label)) {
-      label ??= Label;
-    } else if (Label != null) {
-      labelElement = <Label menuState={menuState} />;
-    }
-
-    return (
-      <>
-        <ReakitMenuButton {...menuState} {...rest} ref={ref} aria-label={label}>
-          {labelElement && (
-            <Box as='span' className={ComponentsTheme.MENU_DROPDOWN_LABEL}>
-              {labelElement}
-            </Box>
-          )}
-          {icon && (
-            <Box as='span' className={ComponentsTheme.MENU_PANE_ICON}>
-              <CommandIconComponent icon={icon} />
-            </Box>
-          )}
-        </ReakitMenuButton>
-        <MenuComponent items={menuItems} menuState={menuState} label={label} />
-      </>
-    );
-  },
-);
-
-DropdownComponent.displayName = 'Dropdown';
-
-interface MenuComponentProps extends BaseMenuProps {
-  /**
-   * Whether the menu is open or not.
-   */
-  open?: boolean | null;
-
-  /**
-   * The sub items to render
-   */
-  items: Array<
-    MenuPaneItem | MenuSeparatorItem | MenuCommandPaneItem | MenuGroupItem | MenuDropdownItem
-  >;
-
-  /**
-   * The aria label for this menu.
-   */
-  label?: string;
-}
-
-/**
- * A menu without the menu button trigger. The menu is opened and closed via the
- * `open` prop.
- */
-export const MenuComponent = (props: MenuComponentProps): JSX.Element => {
-  const { open, items, menuState, label } = props;
-  const isControlled = useRef(open != null);
-
-  useEffect(() => {
-    invariant(isControlled.current === (open != null), {
-      code: ErrorConstant.REACT_COMPONENTS,
-      message:
-        'The controllable menu must either be controlled with a boolean value for `open` or uncontrolled (null | undefined value for `open`) for the lifetime of the component.',
-    });
-
-    if (!isControlled.current) {
-      return;
-    }
-
-    open ? menuState.show() : menuState.hide();
-  }, [open, menuState]);
-
-  return (
-    <ReakitMenu {...menuState} aria-label={label}>
-      {items.map((item, index) => {
-        switch (item.type) {
-          case ComponentItem.MenuSeparator:
-            return <MenuSeparator {...menuState} key={index} />;
-
-          case ComponentItem.MenuPane:
-            return <MenuPane menuState={menuState} item={item} key={index} />;
-
-          case ComponentItem.MenuCommandPane:
-            return <MenuCommandPane menuState={menuState} item={item} key={index} />;
-
-          case ComponentItem.MenuGroup:
-            return <MenuGroup item={item} menuState={menuState} key={index} />;
-
-          case ComponentItem.MenuDropdown:
-            return <MenuDropdown item={item} menuState={menuState} key={index} />;
-
-          default:
-            return <></>;
-        }
-      })}
-    </ReakitMenu>
-  );
-};
-
-interface MenuBarProps {
-  item: MenuBarItem;
-}
-
-export const MenuBar = (props: MenuBarProps): JSX.Element => {
-  const menuState = useMenuBarState();
-  const { items } = props.item;
-
-  return (
-    <ReakitMenuBar {...menuState}>
-      {items.map((item) => {
-        switch (item.type) {
-          case ComponentItem.MenuSeparator:
-            return <MenuSeparator {...menuState} />;
-
-          case ComponentItem.MenuBarGroup:
-            return <MenuBarGroup item={item} menuState={menuState} />;
-
-          case ComponentItem.MenuDropdown:
-            return <MenuDropdown item={item} menuState={menuState} />;
-        }
-      })}
-    </ReakitMenuBar>
-  );
-};
-
-interface MenuBarGroupProps extends BaseMenuBarProps {
-  item: MenuBarGroupItem;
-}
-
-const MenuBarGroup = (props: MenuBarGroupProps) => {
-  const { menuState, item } = props;
-
-  return (
-    <ReakitMenuGroup {...menuState} aria-label={item.label}>
-      {item.items.map((item) => {
-        switch (item.type) {
-          case ComponentItem.MenuDropdown:
-            return <MenuDropdown item={item} menuState={menuState} />;
-        }
-      })}
-    </ReakitMenuGroup>
-  );
-};
-
-interface BaseMenuProps {
-  menuState: MenuStateReturn;
-}
-
-interface BaseMenuBarProps {
-  menuState: MenuBarStateReturn;
-}
-
-interface BaseMenuPaneProps extends BaseMenuBarProps {
-  children: ReactNode;
-  active: boolean;
-  tooltip?: string;
-  tooltipClass?: string;
-  disabled?: boolean;
-  focusable?: boolean;
-  className?: string;
-  role?: 'radio' | 'checkbox';
-  onClick: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-const BaseMenuPane = (props: BaseMenuPaneProps) => {
-  const {
-    menuState: state,
-    children,
-    tooltip,
-    disabled,
-    focusable,
-    onClick,
-    tooltipClass,
-    active,
-    className,
-  } = props;
-  const tooltipState = useTooltipState({ gutter: 5 });
-  const themeProps = useTheme({ className: tooltipClass });
-  const checked = props.role ? (active ? 'true' : 'false') : undefined;
-  const role =
-    props.role === 'checkbox'
-      ? 'menuitemcheckbox'
-      : props.role === 'radio'
-      ? 'menuitemradio'
-      : undefined;
-
-  return (
-    <>
-      <TooltipReference {...tooltipState} as={Box}>
-        <ReakitMenuItem
-          {...state}
-          role={role}
-          aria-checked={checked}
-          disabled={disabled}
-          focusable={focusable}
-          onClick={onClick}
-          className={cx(
-            className,
-            ComponentsTheme.MENU_PANE,
-            active && ComponentsTheme.MENU_PANE_ACTIVE,
-          )}
-        >
-          {children}
-        </ReakitMenuItem>
-      </TooltipReference>
-      {tooltip && (
-        <Tooltip {...tooltipState} style={themeProps.style} className={cx(themeProps.className)}>
-          {tooltip}
-        </Tooltip>
-      )}
-    </>
-  );
-};
diff --git a/packages/remirror__react-components/src/menus/command-menu-item.tsx b/packages/remirror__react-components/src/menus/command-menu-item.tsx
new file mode 100644
index 0000000000..7c2168266b
--- /dev/null
+++ b/packages/remirror__react-components/src/menus/command-menu-item.tsx
@@ -0,0 +1,90 @@
+import { ListItemIcon, ListItemText, MenuItem, MenuItemProps, Typography } from '@mui/material';
+import React, { FC, MouseEventHandler, ReactNode, useCallback } from 'react';
+import { CoreIcon, isString } from '@remirror/core';
+
+import { Icon } from '../icons';
+import { useCommandOptionValues, UseCommandOptionValuesParams } from '../use-command-option-values';
+
+interface ButtonIconProps {
+  icon: CoreIcon | JSX.Element | null;
+}
+
+const MenuItemIcon: FC<ButtonIconProps> = ({ icon }) => {
+  if (icon) {
+    return (
+      <ListItemIcon>{isString(icon) ? <Icon name={icon} size='1rem' /> : <>{icon}</>}</ListItemIcon>
+    );
+  }
+
+  return null;
+};
+
+export interface CommandMenuItemProps
+  extends MenuItemProps,
+    Omit<UseCommandOptionValuesParams, 'active' | 'attrs'> {
+  active?: UseCommandOptionValuesParams['active'];
+  commandName: string;
+  displayShortcut?: boolean;
+  onSelect: () => void;
+  icon?: CoreIcon | JSX.Element;
+  attrs?: UseCommandOptionValuesParams['attrs'];
+  label?: NonNullable<ReactNode>;
+  description?: NonNullable<ReactNode>;
+  displayDescription?: boolean;
+}
+
+export const CommandMenuItem: FC<CommandMenuItemProps> = ({
+  commandName,
+  active = false,
+  enabled,
+  attrs,
+  onSelect,
+  onClick,
+  icon,
+  displayShortcut = true,
+  label,
+  description,
+  displayDescription = true,
+  ...rest
+}) => {
+  const handleClick: MouseEventHandler<HTMLLIElement> = useCallback(
+    (e) => {
+      onSelect();
+      onClick?.(e);
+    },
+    [onSelect, onClick],
+  );
+
+  const handleMouseDown: MouseEventHandler<HTMLLIElement> = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+
+  const commandOptions = useCommandOptionValues({ commandName, active, enabled, attrs });
+
+  let fallbackIcon = null;
+
+  if (commandOptions.icon) {
+    fallbackIcon = isString(commandOptions.icon) ? commandOptions.icon : commandOptions.icon.name;
+  }
+
+  const primary = label ?? commandOptions.label ?? '';
+  const secondary = displayDescription && (description ?? commandOptions.description);
+
+  return (
+    <MenuItem
+      selected={active}
+      disabled={!enabled}
+      onMouseDown={handleMouseDown}
+      {...rest}
+      onClick={handleClick}
+    >
+      <MenuItemIcon icon={icon ?? fallbackIcon} />
+      <ListItemText primary={primary} secondary={secondary} />
+      {displayShortcut && commandOptions.shortcut && (
+        <Typography variant='body2' color='text.secondary' sx={{ ml: 2 }}>
+          {commandOptions.shortcut}
+        </Typography>
+      )}
+    </MenuItem>
+  );
+};
diff --git a/packages/remirror__react-components/src/menus/index.ts b/packages/remirror__react-components/src/menus/index.ts
new file mode 100644
index 0000000000..8a583db33e
--- /dev/null
+++ b/packages/remirror__react-components/src/menus/index.ts
@@ -0,0 +1,3 @@
+export * from './command-menu-item';
+export * from './toggle-callout-menu-item';
+export * from './toggle-heading-menu-item';
diff --git a/packages/remirror__react-components/src/menus/toggle-callout-menu-item.tsx b/packages/remirror__react-components/src/menus/toggle-callout-menu-item.tsx
new file mode 100644
index 0000000000..532bf06218
--- /dev/null
+++ b/packages/remirror__react-components/src/menus/toggle-callout-menu-item.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+import { CalloutExtension, CalloutExtensionAttributes } from 'remirror/extensions';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandMenuItem, CommandMenuItemProps } from './command-menu-item';
+
+export interface ToggleCalloutMenuItemProps
+  extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {
+  attrs?: Partial<CalloutExtensionAttributes>;
+}
+
+export const ToggleCalloutMenuItem: FC<ToggleCalloutMenuItemProps> = ({ attrs, ...rest }) => {
+  const { toggleCallout } = useCommands<CalloutExtension>();
+
+  const handleSelect = useCallback(() => {
+    if (toggleCallout.enabled(attrs)) {
+      toggleCallout(attrs);
+    }
+  }, [toggleCallout, attrs]);
+
+  const active = useActive<CalloutExtension>().callout(attrs);
+  const enabled = toggleCallout.enabled(attrs);
+
+  return (
+    <CommandMenuItem
+      {...rest}
+      commandName='toggleCallout'
+      active={active}
+      enabled={enabled}
+      attrs={attrs}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/menus/toggle-heading-menu-item.tsx b/packages/remirror__react-components/src/menus/toggle-heading-menu-item.tsx
new file mode 100644
index 0000000000..e650099cc5
--- /dev/null
+++ b/packages/remirror__react-components/src/menus/toggle-heading-menu-item.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+import { HeadingExtension, HeadingExtensionAttributes } from 'remirror/extensions';
+import { useActive, useCommands } from '@remirror/react-core';
+
+import { CommandMenuItem, CommandMenuItemProps } from './command-menu-item';
+
+export interface ToggleHeadingMenuItemProps
+  extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> {
+  attrs?: Partial<HeadingExtensionAttributes>;
+}
+
+export const ToggleHeadingMenuItem: FC<ToggleHeadingMenuItemProps> = ({ attrs, ...rest }) => {
+  const { toggleHeading } = useCommands<HeadingExtension>();
+
+  const handleSelect = useCallback(() => {
+    if (toggleHeading.enabled(attrs)) {
+      toggleHeading(attrs);
+    }
+  }, [toggleHeading, attrs]);
+
+  const active = useActive<HeadingExtension>().heading(attrs);
+  const enabled = toggleHeading.enabled(attrs);
+
+  return (
+    <CommandMenuItem
+      {...rest}
+      commandName='toggleHeading'
+      active={active}
+      enabled={enabled}
+      attrs={attrs}
+      onSelect={handleSelect}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/components/emoji-popup-component.tsx b/packages/remirror__react-components/src/popups/emoji-popup-component.tsx
similarity index 100%
rename from packages/remirror__react-components/src/components/emoji-popup-component.tsx
rename to packages/remirror__react-components/src/popups/emoji-popup-component.tsx
diff --git a/packages/remirror__react-components/src/popups/index.ts b/packages/remirror__react-components/src/popups/index.ts
new file mode 100644
index 0000000000..003e224ef9
--- /dev/null
+++ b/packages/remirror__react-components/src/popups/index.ts
@@ -0,0 +1,2 @@
+export * from './emoji-popup-component';
+export * from './mention-atom-popup-component';
diff --git a/packages/remirror__react-components/src/components/mention-atom-popup-component.tsx b/packages/remirror__react-components/src/popups/mention-atom-popup-component.tsx
similarity index 100%
rename from packages/remirror__react-components/src/components/mention-atom-popup-component.tsx
rename to packages/remirror__react-components/src/popups/mention-atom-popup-component.tsx
diff --git a/packages/remirror__react-components/src/positioner-portal.tsx b/packages/remirror__react-components/src/positioner-portal.tsx
new file mode 100644
index 0000000000..853edebc71
--- /dev/null
+++ b/packages/remirror__react-components/src/positioner-portal.tsx
@@ -0,0 +1,17 @@
+import React, { FC, ReactChild } from 'react';
+import { createPortal } from 'react-dom';
+import { useHelpers } from '@remirror/react-core';
+
+export interface PositionerComponentProps {
+  children: ReactChild;
+}
+
+/**
+ * Render a component into the editors positioner widget using `createPortal`
+ * from `react-dom`.
+ */
+export const PositionerPortal: FC<PositionerComponentProps> = (props) => {
+  const container = useHelpers().getPositionerWidget();
+
+  return createPortal(<>{props.children}</>, container);
+};
diff --git a/packages/remirror__react-components/src/providers/theme-provider.tsx b/packages/remirror__react-components/src/providers/theme-provider.tsx
index 86b7c9fa3f..cf1ef7cdbd 100644
--- a/packages/remirror__react-components/src/providers/theme-provider.tsx
+++ b/packages/remirror__react-components/src/providers/theme-provider.tsx
@@ -3,6 +3,7 @@
  *
  * The `ThemeProvider` to wrap your editor with when using these components.
  */
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material';
 import React, {
   createContext,
   ElementType,
@@ -11,11 +12,14 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Provider as ReakitProvider } from 'reakit';
 import { cx, deepMerge } from '@remirror/core';
-import { createThemeVariables, CSSProperties, RemirrorThemeType, THEME } from '@remirror/theme';
-
-import * as system from '../reakit-system';
+import {
+  createThemeVariables,
+  CSSProperties,
+  defaultRemirrorTheme,
+  RemirrorThemeType,
+  THEME,
+} from '@remirror/theme';
 
 const ThemeContext = createContext<RemirrorThemeType>({});
 
@@ -69,15 +73,30 @@ export interface ThemeProviderProps extends UseThemeProps {
  */
 export const ThemeProvider = (props: ThemeProviderProps): ReactElement<ThemeProviderProps> => {
   const { children, as: Component = 'div' } = props;
-  const { theme, style, className } = useTheme({ theme: props.theme });
+  const { theme, style, className } = useTheme({ theme: props.theme ?? defaultRemirrorTheme });
+
+  const muiTheme = createTheme({
+    palette: {
+      primary: {
+        main: theme.color?.primary ?? defaultRemirrorTheme.color.primary,
+        dark: theme.color?.hover?.primary ?? defaultRemirrorTheme.color.hover.primary,
+        contrastText: theme.color?.primaryText ?? defaultRemirrorTheme.color.primaryText,
+      },
+      secondary: {
+        main: theme.color?.secondary ?? defaultRemirrorTheme.color.secondary,
+        dark: theme.color?.hover?.secondary ?? defaultRemirrorTheme.color.hover.secondary,
+        contrastText: theme.color?.secondaryText ?? defaultRemirrorTheme.color.secondaryText,
+      },
+    },
+  });
 
   return (
-    <ReakitProvider unstable_system={system}>
+    <MuiThemeProvider theme={muiTheme}>
       <ThemeContext.Provider value={theme}>
         <Component style={style} className={className}>
           {children}
         </Component>
       </ThemeContext.Provider>
-    </ReakitProvider>
+    </MuiThemeProvider>
   );
 };
diff --git a/packages/remirror__react-components/src/react-component-types.ts b/packages/remirror__react-components/src/react-component-types.ts
deleted file mode 100644
index e4e0e8525c..0000000000
--- a/packages/remirror__react-components/src/react-component-types.ts
+++ /dev/null
@@ -1,402 +0,0 @@
-import type { ComponentType, MouseEvent as ReactMouseEvent } from 'react';
-import type { MenuStateReturn, ToolbarItem as ReakitToolbarItem, ToolbarStateReturn } from 'reakit';
-import type { AnyExtension, ProsemirrorAttributes } from '@remirror/core';
-import type { CoreIcon } from '@remirror/icons';
-import type { ReactFrameworkOutput } from '@remirror/react-core';
-
-export enum ComponentItem {
-  /**
-   * The top level toolbar configuration.
-   */
-  Toolbar = 'toolbar',
-
-  /**
-   * A custom button.
-   */
-  ToolbarButton = 'toolbar-button',
-
-  /**
-   * A button that uses one of the internally available commands.
-   */
-  ToolbarCommandButton = 'toolbar-command-button',
-
-  /**
-   * A custom component
-   */
-  ToolbarComponent = 'toolbar-component',
-
-  /**
-   * A custom react element
-   */
-  ToolbarElement = 'toolbar-element',
-
-  /**
-   * Add a divider to the toolbar.
-   */
-  ToolbarSeparator = 'toolbar-separator',
-
-  /**
-   * Create a group which can wrap multiple ToolbarComponents
-   */
-  ToolbarGroup = 'toolbar-group',
-
-  /**
-   * A menu which can be placed inside a toolbar.
-   */
-  ToolbarMenu = 'toolbar-menu',
-
-  /**
-   * A menu bar which includes top level dropdown menus.
-   */
-  MenuBar = 'menu-bar',
-
-  /**
-   * Group items in the menu bar together.
-   */
-  MenuBarGroup = 'menu-bar-group',
-
-  /**
-   * A menu dropdown.
-   */
-  MenuDropdown = 'menu-bar-dropdown',
-
-  /**
-   * A generic separator which can be placed in both the menu bar and dropdown
-   * (sub) menus.
-   */
-  MenuSeparator = 'menu-separator',
-
-  /**
-   * A menu tile.
-   */
-  MenuPane = 'menu-pane',
-
-  /**
-   * A menu tile derived from a builtin UI command.
-   */
-  MenuCommandPane = 'menu-command-pane',
-
-  /**
-   * Group menu items together.
-   */
-  MenuGroup = 'menu-group',
-
-  /**
-   * A menu action (alias of MenuPane)
-   */
-  MenuAction = 'menu-action',
-
-  /**
-   * A menu action which uses the built in commands. (alias of MenuCommandPane)
-   */
-  MenuCommandAction = 'menu-command-action',
-}
-
-/**
- * Handle click events.
- */
-export type ButtonClickHandler<Extension extends AnyExtension = Remirror.Extensions> = (
-  event: ReactMouseEvent<HTMLButtonElement, MouseEvent>,
-  context: ReactFrameworkOutput<Extension>,
-) => void;
-
-export interface BaseButtonItem {
-  /**
-   * Whether to automatically focus the editor when commands are run. This can
-   * be overridden within each configuration item.
-   */
-  refocusEditor?: boolean;
-
-  /**
-   * Whether the button should be focusable.
-   */
-  focusable?: boolean;
-}
-
-export interface ToolbarItem extends BaseButtonItem, BaseItem {
-  type: ComponentItem.Toolbar;
-
-  /**
-   * All the items within this toolbar group.
-   */
-  items: ToolbarItemUnion[];
-
-  /**
-   * A label for improved a11y.
-   */
-  label?: string;
-
-  /**
-   * Whether to loop through the items in the toolbar with tabs or arrow keys.
-   */
-  loop?: boolean;
-}
-
-/**
- * Generate UI from the supported extensions.
- */
-export interface ToolbarCommandButtonItem extends BaseButtonItem, BaseItem {
-  /**
-   * A button that is configured directly from a command name within the editor.
-   */
-  type: ComponentItem.ToolbarCommandButton;
-
-  /**
-   * Whether to show the icon, the label or label before the icon or icon after
-   * the label.
-   */
-  display: 'icon' | 'label' | 'label-icon' | 'icon-label';
-
-  /**
-   * The name of the command to use.
-   */
-  commandName: Remirror.AllUiCommandNames;
-
-  /**
-   * The attributes to pass through when the command is called.
-   */
-  attrs?: ProsemirrorAttributes;
-
-  /**
-   * Whether to display the shortcut.
-   *
-   * @defaultValue true
-   */
-  displayShortcut?: boolean;
-
-  /**
-   * Override the default onClick handler.
-   */
-  onClick?: ButtonClickHandler;
-}
-
-export interface ToolbarButtonItem extends BaseButtonItem, BaseItem {
-  type: ComponentItem.ToolbarButton;
-  onClick: ButtonClickHandler;
-  icon?: CoreIcon;
-  label?: string;
-  disabled?: boolean;
-  active?: boolean;
-}
-
-export interface ToolbarDividerItem extends BaseItem {
-  type: ComponentItem.ToolbarSeparator;
-}
-
-export interface ToolbarElementItem extends BaseItem {
-  type: ComponentItem.ToolbarElement;
-
-  /**
-   * The JSX to insert at this position.
-   */
-  element: JSX.Element;
-}
-
-export interface CustomToolbarComponentProps {
-  /**
-   * The state which can be spread into the `Wrapper` component to provide
-   * accessibility support (via [Reakit](https://reakit.io/)).
-   */
-  toolbarState: ToolbarStateReturn;
-
-  /**
-   * The wrapper component which can be used to make the component you render
-   * accessible.
-   *
-   * ```tsx
-   * import { ComponentConstant } from '@remirror/react';
-   * const toolbar = [{
-   *   type: ComponentConstant.Component,
-   *   Component: ({ Wrapper, toolbarState }) => <Wrapper {...toolbarState} as='button' />,
-   * }]
-   * ```
-   *
-   * Under the hood it is using the `ToolbarItem` from `reakit/Toolbar`.
-   */
-  Wrapper: typeof ReakitToolbarItem;
-}
-
-export interface ToolbarComponentItem extends BaseItem {
-  type: ComponentItem.ToolbarComponent;
-
-  /**
-   * A custom component to use within the toolbar.
-   */
-  Component: ComponentType<CustomToolbarComponentProps>;
-}
-
-export interface ToolbarGroupItem extends BaseGroupItem, BaseItem {
-  type: ComponentItem.ToolbarGroup;
-
-  /**
-   * The items within the toolbar group.
-   */
-  items: ToolbarGroupItemUnion[];
-}
-
-export interface ToolbarMenuItem extends Omit<MenuDropdownItem, 'type'> {
-  type: ComponentItem.ToolbarMenu;
-}
-
-export type ToolbarItemUnion =
-  | ToolbarDividerItem
-  | ToolbarElementItem
-  | ToolbarComponentItem
-  | ToolbarButtonItem
-  | ToolbarCommandButtonItem
-  | ToolbarGroupItem
-  | ToolbarMenuItem;
-
-/**
- * A valid item which can be placed within a group item in the toolbar.
- */
-type ToolbarGroupItemUnion = Exclude<ToolbarItemUnion, ToolbarGroupItem>;
-
-export interface MenuSeparatorItem {
-  type: ComponentItem.MenuSeparator;
-}
-
-export interface MenuPaneItem extends BaseButtonItem, BaseItem {
-  type: ComponentItem.MenuPane;
-  label?: string;
-  icon?: CoreIcon | ComponentType<object>;
-  onClick: ButtonClickHandler;
-  shortcut?: string;
-}
-
-type PaneLayoutSection = 'icon' | 'label' | 'shortcut' | 'icon-label';
-
-/**
- * Get the configuration directly from a built in extension.
- */
-export interface MenuCommandPaneItem extends BaseButtonItem {
-  /**
-   * A button that is configured directly from a command name within the editor.
-   */
-  type: ComponentItem.MenuCommandPane;
-
-  /**
-   * @defaultValue ['icon', 'label', 'shortcut']
-   */
-  layout?: PaneLayoutSection[];
-
-  /**
-   * The name of the command to use.
-   */
-  commandName: Remirror.AllUiCommandNames;
-
-  /**
-   * The attributes to pass through when the command is called.
-   */
-  attrs?: ProsemirrorAttributes;
-
-  /**
-   * Whether to display the shortcut.
-   *
-   * @defaultValue true
-   */
-  displayShortcut?: boolean;
-
-  /**
-   * The role that should be passed to the button element.
-   */
-  role?: 'radio' | 'checkbox';
-
-  /**
-   * An optional click handler to use if you want to override the default click
-   * behaviour.
-   */
-  onClick?: ButtonClickHandler;
-
-  /**
-   * The option to override the built in shortcut string.
-   */
-  shortcut?: string;
-}
-
-export interface MenuGroupItem extends BaseGroupItem, BaseItem {
-  type: ComponentItem.MenuGroup;
-  items: Array<MenuDropdownItem | MenuCommandPaneItem | MenuPaneItem>;
-  role?: 'radio' | 'checkbox';
-}
-
-export interface MenuBarGroupItem extends BaseItem {
-  type: ComponentItem.MenuBarGroup;
-  items: MenuDropdownItem[];
-  label?: string;
-}
-interface MenuLabelComponentProps {
-  menuState: MenuStateReturn;
-}
-
-export interface MenuDropdownItem extends BaseItem {
-  type: ComponentItem.MenuDropdown;
-  label?: string | ComponentType<MenuLabelComponentProps>;
-  items: Array<
-    MenuPaneItem | MenuSeparatorItem | MenuCommandPaneItem | MenuGroupItem | MenuDropdownItem
-  >;
-  icon?: CoreIcon;
-
-  /**
-   * Defaults to label when it is a string and used for the aria label for the
-   * menu element.
-   *
-   * @defaultValue `label`
-   */
-  menuLabel?: string;
-}
-
-export interface MenuBarItem extends BaseItem {
-  type: ComponentItem.MenuBar;
-
-  /**
-   * The items provided by the menu.
-   */
-  items: Array<MenuDropdownItem | MenuSeparatorItem | MenuBarGroupItem>;
-}
-
-export interface MenuActionItem extends Omit<MenuPaneItem, 'type'>, BaseMenuActionItem {
-  type: ComponentItem.MenuAction;
-}
-
-export interface MenuCommandActionItem
-  extends Omit<MenuCommandPaneItem, 'type'>,
-    BaseMenuActionItem {
-  type: ComponentItem.MenuCommandAction;
-}
-
-export type MenuActionItemUnion = MenuActionItem | MenuCommandActionItem;
-
-interface BaseMenuActionItem {
-  /**
-   * A group of descriptive tags which will be used to search through the
-   * actions dynamically.
-   */
-  tags: string[];
-
-  /**
-   * Description of the command which will be used to aid search.
-   */
-  description?: string;
-}
-
-export interface BaseGroupItem {
-  /**
-   * A label for improved a11y.
-   */
-  label?: string;
-
-  /**
-   * Whether to automatically insert a divider.
-   */
-  separator?: 'none' | 'start' | 'end' | 'both';
-}
-
-interface BaseItem {
-  type: ComponentItem;
-
-  /**
-   * A key which is used as the key when provided. Otherwise the index is used.
-   */
-  key?: string | number;
-}
diff --git a/packages/remirror__react-components/src/reakit-system/button.ts b/packages/remirror__react-components/src/reakit-system/button.ts
deleted file mode 100644
index 59d7d7c3b2..0000000000
--- a/packages/remirror__react-components/src/reakit-system/button.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ButtonHTMLProps, ButtonOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapButtonOptions = BootstrapRoleOptions & ButtonOptions;
-
-export function useButtonOptions({
-  unstable_system: { fill = 'opaque', palette = 'primary', ...system } = {},
-  ...options
-}: BootstrapButtonOptions): BootstrapButtonOptions {
-  return { unstable_system: { fill, palette, ...system }, ...options };
-}
-
-export function useButtonProps(
-  _: BootstrapButtonOptions,
-  htmlProps: ButtonHTMLProps = {},
-): ButtonHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.BUTTON, htmlProps.className) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/composite.ts b/packages/remirror__react-components/src/reakit-system/composite.ts
deleted file mode 100644
index ce875ab05b..0000000000
--- a/packages/remirror__react-components/src/reakit-system/composite.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CompositeItemHTMLProps, CompositeItemOptions } from 'reakit';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapCompositeItemOptions = BootstrapRoleOptions & CompositeItemOptions;
-
-export function useCompositeItemOptions({
-  unstable_system: { fill = 'opaque', palette = 'primary', ...system } = {},
-  ...options
-}: BootstrapCompositeItemOptions): BootstrapCompositeItemOptions {
-  return { unstable_system: { fill, palette, ...system }, ...options };
-}
-
-export function useCompositeItemProps(
-  _: BootstrapCompositeItemOptions,
-  htmlProps: CompositeItemHTMLProps = {},
-): CompositeItemHTMLProps {
-  return {
-    ...htmlProps,
-    // className: cx(Components.COMPOSITE, htmlProps.className),
-  };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/dialog.ts b/packages/remirror__react-components/src/reakit-system/dialog.ts
deleted file mode 100644
index 16e0566820..0000000000
--- a/packages/remirror__react-components/src/reakit-system/dialog.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  DialogBackdropHTMLProps,
-  DialogBackdropOptions,
-  DialogHTMLProps,
-  DialogOptions,
-} from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapDialogOptions = BootstrapRoleOptions & DialogOptions;
-
-export function useDialogOptions({
-  unstable_system: { palette = 'background', fill = 'opaque', ...system } = {},
-  ...options
-}: BootstrapDialogOptions): BootstrapDialogOptions {
-  return {
-    ...options,
-    unstable_system: { palette, fill, ...system },
-  };
-}
-
-export function useDialogProps(
-  _: BootstrapDialogOptions,
-  htmlProps: DialogHTMLProps = {},
-): DialogHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.DIALOG, htmlProps.className) };
-}
-
-export type BootstrapDialogBackdropOptions = BootstrapRoleOptions & DialogBackdropOptions;
-
-export function useDialogBackdropProps(
-  _: BootstrapDialogBackdropOptions,
-  htmlProps: DialogBackdropHTMLProps = {},
-): DialogBackdropHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.DIALOG_BACKDROP, htmlProps.className) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/form.ts b/packages/remirror__react-components/src/reakit-system/form.ts
deleted file mode 100644
index 041eefbd1e..0000000000
--- a/packages/remirror__react-components/src/reakit-system/form.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {
-  unstable_FormGroupHTMLProps,
-  unstable_FormGroupOptions,
-  unstable_FormHTMLProps,
-  unstable_FormInputOptions,
-  unstable_FormLabelHTMLProps,
-  unstable_FormLabelOptions,
-  unstable_FormMessageHTMLProps,
-  unstable_FormMessageOptions,
-  unstable_FormOptions,
-  unstable_FormRemoveButtonOptions,
-} from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapFormOptions = BootstrapRoleOptions & unstable_FormOptions;
-
-export function useFormProps(
-  _: BootstrapFormOptions,
-  htmlProps: unstable_FormHTMLProps = {},
-): unstable_FormHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.FORM) };
-}
-
-export type BootstrapFormInputOptions = BootstrapRoleOptions & unstable_FormInputOptions<any, any>;
-
-export function useFormInputOptions({
-  unstable_system: { fill = 'outline', ...system } = {},
-  ...options
-}: BootstrapFormInputOptions): BootstrapFormInputOptions {
-  return {
-    unstable_system: {
-      fill,
-      ...system,
-      palette: system.palette,
-    },
-    ...options,
-  };
-}
-
-export type BootstrapFormMessageOptions = BootstrapRoleOptions &
-  unstable_FormMessageOptions<any, any>;
-
-export function useFormMessageOptions({
-  unstable_system: system = {},
-  ...options
-}: BootstrapFormMessageOptions): BootstrapFormMessageOptions {
-  return {
-    unstable_system: {
-      ...system,
-      palette: system.palette || 'success',
-    },
-    ...options,
-  };
-}
-
-export function useFormMessageProps(
-  _: BootstrapFormMessageOptions,
-  htmlProps: unstable_FormMessageHTMLProps = {},
-): unstable_FormMessageHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.FORM_MESSAGE) };
-}
-
-export type BootstrapFormLabelOptions = BootstrapRoleOptions & unstable_FormLabelOptions<any, any>;
-
-export function useFormLabelProps(
-  _: BootstrapFormLabelOptions,
-  htmlProps: unstable_FormLabelHTMLProps = {},
-): unstable_FormLabelHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.FORM_LABEL) };
-}
-
-export type BootstrapFormGroupOptions = BootstrapRoleOptions & unstable_FormGroupOptions<any, any>;
-
-export function useFormGroupOptions({
-  unstable_system: { fill = 'outline', ...system } = {},
-  ...options
-}: BootstrapFormGroupOptions): BootstrapFormGroupOptions {
-  return {
-    unstable_system: { fill, ...system, palette: system.palette },
-    ...options,
-  };
-}
-
-export function useFormGroupProps(
-  _: BootstrapFormGroupOptions,
-  htmlProps: unstable_FormGroupHTMLProps = {},
-): unstable_FormGroupHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.FORM_GROUP) };
-}
-
-export type BootstrapFormRemoveButtonOptions = BootstrapRoleOptions &
-  unstable_FormRemoveButtonOptions<any, any>;
-
-export function useFormRemoveButtonOptions({
-  unstable_system: { palette = 'danger', ...system } = {},
-  ...options
-}: BootstrapFormRemoveButtonOptions): BootstrapFormRemoveButtonOptions {
-  return { unstable_system: { palette, ...system }, ...options };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/group.ts b/packages/remirror__react-components/src/reakit-system/group.ts
deleted file mode 100644
index abd8c0dd21..0000000000
--- a/packages/remirror__react-components/src/reakit-system/group.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { GroupHTMLProps, GroupOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapGroupOptions = BootstrapRoleOptions & GroupOptions;
-
-export function useGroupProps(
-  _: BootstrapGroupOptions,
-  htmlProps: GroupHTMLProps = {},
-): GroupHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.GROUP) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/index.ts b/packages/remirror__react-components/src/reakit-system/index.ts
deleted file mode 100644
index d904e5b4fb..0000000000
--- a/packages/remirror__react-components/src/reakit-system/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './button';
-export * from './composite';
-export * from './dialog';
-export * from './form';
-export * from './group';
-export * from './input';
-export * from './menu';
-export * from './palette';
-export * from './popover';
-export * from './role';
-export * from './separator';
-export * from './tab';
-export * from './tabbable';
-export * from './toolbar';
-export * from './tooltip';
diff --git a/packages/remirror__react-components/src/reakit-system/input.ts b/packages/remirror__react-components/src/reakit-system/input.ts
deleted file mode 100644
index 76485fd3ae..0000000000
--- a/packages/remirror__react-components/src/reakit-system/input.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { InputHTMLProps, InputOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapInputOptions = BootstrapRoleOptions & InputOptions;
-
-export function useInputProps(
-  _: BootstrapRoleOptions,
-  htmlProps: InputHTMLProps = {},
-): InputHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.INPUT) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/menu.tsx b/packages/remirror__react-components/src/reakit-system/menu.tsx
deleted file mode 100644
index f30c0a021e..0000000000
--- a/packages/remirror__react-components/src/reakit-system/menu.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, { createContext, ReactNode, useCallback, useContext } from 'react';
-import {
-  MenuBarHTMLProps,
-  MenuBarOptions,
-  MenuButtonHTMLProps,
-  MenuButtonOptions,
-  MenuGroupHTMLProps,
-  MenuGroupOptions,
-  MenuHTMLProps,
-  MenuItemCheckboxHTMLProps,
-  MenuItemCheckboxOptions,
-  MenuItemHTMLProps,
-  MenuItemOptions,
-  MenuItemRadioHTMLProps,
-  MenuItemRadioOptions,
-  MenuOptions,
-  MenuStateReturn,
-} from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapMenuBarOptions = BootstrapRoleOptions & MenuBarOptions;
-
-export function useMenuBarProps(
-  { orientation }: BootstrapMenuBarOptions,
-  htmlProps: MenuBarHTMLProps = {},
-): MenuBarHTMLProps {
-  return {
-    ...htmlProps,
-    className: cx(
-      ComponentsTheme.MENU_BAR,
-      orientation === 'horizontal' ? ComponentsTheme.FLEX_ROW : ComponentsTheme.FLEX_COLUMN,
-      htmlProps.className,
-    ),
-  };
-}
-
-export type BootstrapMenuItemOptions = BootstrapRoleOptions & MenuItemOptions;
-
-export function useMenuItemProps(
-  { orientation }: BootstrapMenuItemOptions,
-  htmlProps: MenuItemHTMLProps = {},
-): MenuItemHTMLProps {
-  return {
-    ...htmlProps,
-    className: cx(
-      ComponentsTheme.MENU_ITEM,
-      orientation === 'horizontal'
-        ? ComponentsTheme.MENU_ITEM_ROW
-        : ComponentsTheme.MENU_ITEM_COLUMN,
-      htmlProps.className,
-    ),
-  };
-}
-
-export type BootstrapMenuOptions = BootstrapRoleOptions & MenuOptions;
-
-// eslint-disable-next-line unicorn/no-useless-undefined
-const OrientationContext = createContext<'horizontal' | 'vertical' | undefined>(undefined);
-
-export function useMenuOptions({
-  unstable_system: { palette = 'background', fill = 'opaque', ...system } = {},
-  ...options
-}: BootstrapMenuOptions): BootstrapMenuOptions {
-  const parentOrientation = useContext(OrientationContext);
-  const unstable_system = { palette, fill, ...system };
-  const transform = options.unstable_popoverStyles?.transform ?? '';
-
-  if (parentOrientation === 'vertical' && options.orientation === 'vertical') {
-    return {
-      ...options,
-      unstable_system,
-      unstable_popoverStyles: {
-        ...options.unstable_popoverStyles,
-        transform: `${transform} translate3d(0px, -0.3em, 0px)`,
-      },
-    };
-  }
-
-  return { ...options, unstable_system };
-}
-
-export function useMenuProps(
-  options: BootstrapMenuOptions,
-  { wrapElement: htmlWrapElement, ...htmlProps }: MenuHTMLProps = {},
-): MenuHTMLProps {
-  const wrapElement = useCallback(
-    (element: ReactNode) => {
-      if (htmlWrapElement) {
-        element = htmlWrapElement(element);
-      }
-
-      return (
-        <OrientationContext.Provider value={options.orientation}>
-          {element}
-        </OrientationContext.Provider>
-      );
-    },
-    [htmlWrapElement, options.orientation],
-  );
-
-  return {
-    ...htmlProps,
-    wrapElement,
-    className: cx(ComponentsTheme.MENU, htmlProps.className),
-  };
-}
-
-export type BootstrapMenuButtonOptions = BootstrapRoleOptions &
-  MenuButtonOptions &
-  Pick<Partial<MenuStateReturn>, 'unstable_originalPlacement'>;
-
-export function useMenuButtonProps(
-  options: BootstrapMenuButtonOptions,
-  { children, ...htmlProps }: MenuButtonHTMLProps = {},
-): MenuButtonHTMLProps {
-  const placement = options.unstable_originalPlacement ?? options.placement;
-  const dir = placement
-    ? (placement.split('-')[0] as 'top' | 'bottom' | 'right' | 'left')
-    : undefined;
-
-  const svg = dir
-    ? {
-        top: (
-          <svg viewBox='0 0 50 43.3'>
-            <polygon points='25 0 0 43.3 50 43.3 25 0' />
-          </svg>
-        ),
-        bottom: (
-          <svg viewBox='0 0 50 43.3'>
-            <polygon points='25 43.3 50 0 0 0 25 43.3' />
-          </svg>
-        ),
-        right: (
-          <svg viewBox='0 0 43.3 50'>
-            <polygon points='43.3 25 0 0 0 50 43.3 25' />
-          </svg>
-        ),
-        left: (
-          <svg viewBox='0 0 43.3 50'>
-            <polygon points='0 25 43.3 50 43.3 0 0 25' />
-          </svg>
-        ),
-      }[dir]
-    : null;
-
-  return {
-    ...htmlProps,
-    children: (
-      <>
-        {children}
-        {svg}
-      </>
-    ),
-    className: cx(
-      ComponentsTheme.MENU_BUTTON,
-      dir === 'left' ? ComponentsTheme.MENU_BUTTON_LEFT : ComponentsTheme.MENU_BUTTON_RIGHT,
-      children && dir === 'left' && ComponentsTheme.MENU_BUTTON_NESTED_LEFT,
-      children && dir === 'right' && ComponentsTheme.MENU_BUTTON_NESTED_RIGHT,
-      htmlProps.className,
-    ),
-  };
-}
-
-export type BootstrapMenuItemCheckboxOptions = BootstrapRoleOptions & MenuItemCheckboxOptions;
-
-export function useMenuItemCheckboxProps(
-  _: BootstrapMenuItemCheckboxOptions,
-  htmlProps: MenuItemCheckboxHTMLProps = {},
-): MenuItemCheckboxHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.MENU_ITEM_CHECKBOX, htmlProps.className) };
-}
-
-export type BootstrapMenuItemRadioOptions = BootstrapRoleOptions & MenuItemRadioOptions;
-
-export function useMenuItemRadioProps(
-  _: BootstrapMenuItemRadioOptions,
-  htmlProps: MenuItemRadioHTMLProps = {},
-): MenuItemRadioHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.MENU_ITEM_CHECKBOX, htmlProps.className) };
-}
-
-export type BootstrapMenuGroupOptions = BootstrapRoleOptions & MenuGroupOptions;
-
-export function useMenuGroupProps(
-  _: BootstrapMenuGroupOptions,
-  htmlProps: MenuGroupHTMLProps = {},
-): MenuGroupHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.MENU_GROUP, htmlProps.className) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/palette.ts b/packages/remirror__react-components/src/reakit-system/palette.ts
deleted file mode 100644
index 739e07e0fd..0000000000
--- a/packages/remirror__react-components/src/reakit-system/palette.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { palette } from 'reakit-system-palette';
diff --git a/packages/remirror__react-components/src/reakit-system/popover.ts b/packages/remirror__react-components/src/reakit-system/popover.ts
deleted file mode 100644
index 4072f696aa..0000000000
--- a/packages/remirror__react-components/src/reakit-system/popover.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import {
-  PopoverArrowHTMLProps,
-  PopoverArrowOptions,
-  PopoverHTMLProps,
-  PopoverOptions,
-} from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapPopoverOptions = BootstrapRoleOptions & PopoverOptions;
-
-export function usePopoverOptions({
-  unstable_system: { palette = 'background', fill = 'opaque', ...system } = {},
-  ...options
-}: BootstrapPopoverOptions): BootstrapPopoverOptions {
-  return {
-    unstable_system: { palette, fill, ...system },
-    ...options,
-  };
-}
-
-export function usePopoverProps(
-  _: BootstrapPopoverOptions,
-  htmlProps: PopoverHTMLProps = {},
-): PopoverHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.POPOVER, htmlProps.className) };
-}
-
-export type BootstrapPopoverArrowOptions = BootstrapRoleOptions & PopoverArrowOptions;
-
-export function usePopoverArrowProps(
-  _: BootstrapPopoverArrowOptions,
-  htmlProps: PopoverArrowHTMLProps = {},
-): PopoverArrowHTMLProps {
-  return { 'data-arrow': '', ...htmlProps } as PopoverArrowHTMLProps;
-}
diff --git a/packages/remirror__react-components/src/reakit-system/role.ts b/packages/remirror__react-components/src/reakit-system/role.ts
deleted file mode 100644
index b2376092d3..0000000000
--- a/packages/remirror__react-components/src/reakit-system/role.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { RoleHTMLProps } from 'reakit';
-import { PaletteRoleOptions } from 'reakit-system-palette';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-export type BootstrapRoleOptions = PaletteRoleOptions;
-
-export function useRoleProps(
-  _: BootstrapRoleOptions,
-  htmlProps: RoleHTMLProps = {},
-): RoleHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.ROLE, htmlProps.className) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/separator.ts b/packages/remirror__react-components/src/reakit-system/separator.ts
deleted file mode 100644
index 7a33c5ad26..0000000000
--- a/packages/remirror__react-components/src/reakit-system/separator.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { SeparatorHTMLProps, SeparatorOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapSeparatorOptions = BootstrapRoleOptions & SeparatorOptions;
-
-export function useSeparatorProps(
-  _: BootstrapSeparatorOptions,
-  htmlProps: SeparatorHTMLProps = {},
-): SeparatorHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.SEPARATOR) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/tab.ts b/packages/remirror__react-components/src/reakit-system/tab.ts
deleted file mode 100644
index 465f86bfe1..0000000000
--- a/packages/remirror__react-components/src/reakit-system/tab.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { TabHTMLProps, TabListHTMLProps, TabListOptions, TabOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapTabOptions = BootstrapRoleOptions & TabOptions;
-
-export function useTabProps(_: BootstrapTabOptions, htmlProps: TabHTMLProps = {}): TabHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.TAB, htmlProps.className) };
-}
-
-export type BootstrapTabListOptions = BootstrapRoleOptions & TabListOptions;
-
-export function useTabListProps(
-  _: BootstrapTabListOptions,
-  htmlProps: TabListHTMLProps = {},
-): TabListHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.TAB_LIST) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/tabbable.ts b/packages/remirror__react-components/src/reakit-system/tabbable.ts
deleted file mode 100644
index eadc88ad8a..0000000000
--- a/packages/remirror__react-components/src/reakit-system/tabbable.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { TabbableHTMLProps, TabbableOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapTabbableOptions = BootstrapRoleOptions & TabbableOptions;
-
-export function useTabbableProps(
-  _: BootstrapTabbableOptions,
-  htmlProps: TabbableHTMLProps = {},
-): TabbableHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.TABBABLE) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/toolbar.ts b/packages/remirror__react-components/src/reakit-system/toolbar.ts
deleted file mode 100644
index 8d662e8659..0000000000
--- a/packages/remirror__react-components/src/reakit-system/toolbar.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ToolbarHTMLProps, ToolbarOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapToolbarOptions = BootstrapRoleOptions & ToolbarOptions;
-
-export function useToolbarProps(
-  _: BootstrapToolbarOptions,
-  htmlProps: ToolbarHTMLProps = {},
-): ToolbarHTMLProps {
-  return { ...htmlProps, className: cx(htmlProps.className, ComponentsTheme.TOOLBAR) };
-}
diff --git a/packages/remirror__react-components/src/reakit-system/tooltip.ts b/packages/remirror__react-components/src/reakit-system/tooltip.ts
deleted file mode 100644
index ff67b8a34a..0000000000
--- a/packages/remirror__react-components/src/reakit-system/tooltip.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { TooltipHTMLProps, TooltipOptions } from 'reakit';
-import { cx } from '@remirror/core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { BootstrapRoleOptions } from './role';
-
-export type BootstrapTooltipOptions = BootstrapRoleOptions & TooltipOptions;
-
-export function useTooltipOptions({
-  unstable_system: { palette = 'foreground', fill = 'opaque', ...system } = {},
-  ...options
-}: BootstrapTooltipOptions): BootstrapTooltipOptions {
-  return { unstable_system: { palette, fill, ...system }, ...options };
-}
-
-export function useTooltipProps(
-  _: BootstrapTooltipOptions,
-  htmlProps: TooltipHTMLProps = {},
-): TooltipHTMLProps {
-  return { ...htmlProps, className: cx(ComponentsTheme.TOOLTIP, htmlProps.className) };
-}
diff --git a/packages/remirror__react-components/src/toolbar/base-toolbar.tsx b/packages/remirror__react-components/src/toolbar/base-toolbar.tsx
new file mode 100644
index 0000000000..cba2e7cf12
--- /dev/null
+++ b/packages/remirror__react-components/src/toolbar/base-toolbar.tsx
@@ -0,0 +1,13 @@
+import { Stack, StackProps } from '@mui/material';
+import React, { FC } from 'react';
+
+export const Toolbar: FC<StackProps> = (props) => {
+  return (
+    <Stack
+      direction='row'
+      spacing={1}
+      sx={{ backgroundColor: 'background.paper', overflowX: 'auto' }}
+      {...props}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/toolbar/floating-toolbar.tsx b/packages/remirror__react-components/src/toolbar/floating-toolbar.tsx
new file mode 100644
index 0000000000..fc60f56f46
--- /dev/null
+++ b/packages/remirror__react-components/src/toolbar/floating-toolbar.tsx
@@ -0,0 +1,68 @@
+import { Popper, PopperProps } from '@mui/material';
+import React, { CSSProperties, FC, RefCallback, useCallback, useMemo, useState } from 'react';
+import type { PositionerParam } from '@remirror/extension-positioner';
+import { getPositioner } from '@remirror/extension-positioner';
+import { usePositioner } from '@remirror/react-hooks';
+
+import { FormattingButtonGroup } from '../button-groups';
+import { Toolbar } from './base-toolbar';
+
+const DEFAULT_MODIFIERS = [
+  {
+    name: 'offset',
+    options: {
+      offset: [0, 8],
+    },
+  },
+];
+
+export interface FloatingToolbarProps extends Omit<PopperProps, 'open' | 'anchorEl'> {
+  positioner?: PositionerParam;
+}
+
+export const FloatingToolbar: FC<FloatingToolbarProps> = ({
+  positioner = 'selection',
+  children,
+  ...rest
+}) => {
+  const { ref, x, y, width, height, active } = usePositioner(() => {
+    return getPositioner(positioner);
+  }, [positioner]);
+
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+
+  const inlineStyle: CSSProperties = useMemo(
+    () => ({
+      position: 'absolute',
+      pointerEvents: 'none',
+      left: x,
+      top: y,
+      width,
+      height,
+    }),
+    [x, y, width, height],
+  );
+
+  const combinedSelectionRefs: RefCallback<HTMLDivElement> = useCallback(
+    (elem) => {
+      setAnchorEl(elem);
+      ref?.(elem);
+    },
+    [ref],
+  );
+
+  return (
+    <>
+      <div ref={combinedSelectionRefs} style={inlineStyle} />
+      <Popper
+        placement='top'
+        modifiers={DEFAULT_MODIFIERS}
+        {...rest}
+        open={active}
+        anchorEl={anchorEl}
+      >
+        <Toolbar>{children ? <>{children}</> : <FormattingButtonGroup />}</Toolbar>
+      </Popper>
+    </>
+  );
+};
diff --git a/packages/remirror__react-components/src/toolbar/index.tsx b/packages/remirror__react-components/src/toolbar/index.tsx
index 27e877f089..4840b141f9 100644
--- a/packages/remirror__react-components/src/toolbar/index.tsx
+++ b/packages/remirror__react-components/src/toolbar/index.tsx
@@ -1,411 +1,5 @@
-/**
- * @module
- *
- * The builtin toolbars for use with remirror.
- */
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import React, { useCallback } from 'react';
-import {
-  Box,
-  Button,
-  Group,
-  Toolbar as ReakitToolbar,
-  ToolbarItem as ReakitToolbarItem,
-  ToolbarSeparator as ReakitToolbarSeparator,
-  ToolbarStateReturn,
-  Tooltip,
-  TooltipReference,
-  useToolbarState,
-  useTooltipState,
-  VisuallyHidden,
-} from 'reakit';
-import {
-  AnyExtension,
-  CommandDecoratorMessageProps,
-  cx,
-  ErrorConstant,
-  Except,
-  includes,
-  invariant,
-} from '@remirror/core';
-import {
-  useActive,
-  useChainedCommands,
-  useCommands,
-  useHelpers,
-  useI18n,
-  useRemirrorContext,
-} from '@remirror/react-core';
-import { ComponentsTheme } from '@remirror/theme';
-
-import { CommandIconComponent } from '../components';
-import { DropdownComponent } from '../menu';
-import { useTheme } from '../providers';
-import {
-  BaseButtonItem,
-  ComponentItem,
-  ToolbarButtonItem,
-  ToolbarCommandButtonItem,
-  ToolbarGroupItem,
-  ToolbarItem,
-  ToolbarItemUnion,
-  ToolbarMenuItem,
-} from '../react-component-types';
-import {
-  getCommandOptionValue,
-  getShortcutString,
-  getUiShortcutString,
-} from '../react-component-utils';
-
-interface BaseToolbarProps extends BaseButtonItem {
-  /**
-   * The toolbar state generated by `Reakit` (the underlying UI library).
-   */
-  toolbarState: ToolbarStateReturn;
-}
-
-interface ToolbarProps extends Except<ToolbarItem, 'type'> {}
-
-/**
- * This is the menu that can be placed at the top of the editor.
- */
-export const Toolbar = (props: ToolbarProps): JSX.Element => {
-  const { items, loop, label, refocusEditor, focusable } = props;
-  const toolbarState = useToolbarState({ loop });
-  const focusableProps = focusable === false ? { focusable: false, tabIndex: -1 } : {};
-
-  return (
-    <ReakitToolbar {...toolbarState} {...focusableProps} aria-label={label}>
-      {items.map(getToolbarComponent({ toolbarState, refocusEditor }))}
-    </ReakitToolbar>
-  );
-};
-
-interface ToolbarCommandButtonProps extends BaseToolbarProps {
-  /**
-   * The command button item.
-   */
-  item: ToolbarCommandButtonItem;
-}
-
-const ToolbarCommandButton = (props: ToolbarCommandButtonProps) => {
-  // Gather all the hooks used for this component.
-  const { toolbarState, item } = props;
-  const commands = useCommands();
-  const chain = useChainedCommands();
-  const { getCommandOptions } = useHelpers();
-  const context = useRemirrorContext();
-  const { t } = useI18n();
-  const refocusEditor = item.refocusEditor ?? props.refocusEditor ?? false;
-
-  // Will cause the editor to rerender for each state update.
-  const active = useActive<AnyExtension>();
-
-  const { display, commandName: name, attrs, displayShortcut = true } = item;
-  const options = getCommandOptions(name);
-
-  if (!options) {
-    return <></>;
-  }
-
-  const enabled = commands[name]?.isEnabled(attrs) ?? false;
-  const isActive = active[options.name]?.(attrs) ?? false;
-  const commandProps: CommandDecoratorMessageProps = { active: isActive, attrs, enabled, t };
-  const description = getCommandOptionValue(options.description, commandProps);
-  const label = getCommandOptionValue(options.label, commandProps);
-  const icon = getCommandOptionValue(options.icon, commandProps);
-  const shortcutString =
-    displayShortcut && options.shortcut
-      ? ` (${getShortcutString(getUiShortcutString(options.shortcut, attrs ?? {}), { t })})`
-      : '';
-
-  const onClick = (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (item.onClick) {
-      item.onClick(event, context);
-      return;
-    }
-
-    if (options.disableChaining) {
-      commands[name]?.(attrs);
-      return;
-    }
-
-    const command = chain[name]?.(attrs);
-
-    if (refocusEditor) {
-      command?.focus?.();
-    }
-
-    command?.run();
-  };
-
-  switch (display) {
-    case 'icon': {
-      invariant(label && icon, {
-        code: ErrorConstant.REACT_CONTROLLED,
-        message: `Both label and icon are needed for the command: ${name} in extension: ${options.name}`,
-      });
-
-      return (
-        <BaseToolbarButton
-          toolbarState={toolbarState}
-          disabled={!enabled}
-          focusable={enabled}
-          tooltip={`${label}${shortcutString}`}
-          onClick={onClick}
-          active={isActive}
-        >
-          <VisuallyHidden>{label}</VisuallyHidden>
-          <CommandIconComponent icon={icon} />
-        </BaseToolbarButton>
-      );
-    }
-
-    case 'label': {
-      invariant(label && description, {
-        code: ErrorConstant.REACT_CONTROLLED,
-        message: `Both label and description are needed for the command: ${name} in extension: ${options.name}`,
-      });
-
-      return (
-        <BaseToolbarButton
-          toolbarState={toolbarState}
-          disabled={!enabled}
-          focusable={enabled}
-          tooltip={`${description}${shortcutString}`}
-          onClick={onClick}
-          active={isActive}
-        >
-          {label}
-        </BaseToolbarButton>
-      );
-    }
-
-    default: {
-      invariant(label && icon, {
-        code: ErrorConstant.REACT_CONTROLLED,
-        message: `Icon, label and description are needed for the command: ${name} in extension: ${options.name}`,
-      });
-
-      return (
-        <BaseToolbarButton
-          toolbarState={toolbarState}
-          disabled={!enabled}
-          focusable={enabled}
-          tooltip={`${label}${shortcutString}`}
-          onClick={onClick}
-          active={isActive}
-        >
-          {display === 'label-icon' && <Box as='span'> {label}</Box>}
-          <CommandIconComponent icon={icon} />{' '}
-          {display === 'icon-label' && <Box as='span'> {label}</Box>}
-        </BaseToolbarButton>
-      );
-    }
-  }
-};
-
-interface BaseToolbarButtonProps extends BaseToolbarProps {
-  children: ReactNode;
-  active: boolean;
-  tooltip?: string;
-  tooltipClass?: string;
-  disabled?: boolean;
-  focusable?: boolean;
-  className?: string;
-  onClick: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-const BaseToolbarButton = (props: BaseToolbarButtonProps) => {
-  const {
-    toolbarState,
-    children,
-    tooltip,
-    disabled,
-    focusable,
-    onClick,
-    tooltipClass,
-    active,
-    className,
-  } = props;
-  const tooltipState = useTooltipState({ gutter: 5 });
-  const themeProps = useTheme({ className: tooltipClass });
-
-  return (
-    <>
-      <TooltipReference {...tooltipState} as={Box}>
-        <ReakitToolbarItem
-          {...toolbarState}
-          as={Button}
-          disabled={disabled}
-          focusable={focusable}
-          onClick={onClick}
-          className={cx(className, active && ComponentsTheme.BUTTON_ACTIVE)}
-        >
-          {children}
-        </ReakitToolbarItem>
-      </TooltipReference>
-      {tooltip && (
-        <Tooltip {...tooltipState} style={themeProps.style} className={cx(themeProps.className)}>
-          {tooltip}
-        </Tooltip>
-      )}
-    </>
-  );
-};
-
-interface ToolbarSeparatorProps extends BaseToolbarProps {}
-
-/**
- * The divider component
- */
-const ToolbarSeparator = (props: ToolbarSeparatorProps) => {
-  return <ReakitToolbarSeparator {...props.toolbarState} />;
-};
-
-interface ToolbarGroupProps extends BaseToolbarProps {
-  /**
-   * The group item configuration.
-   */
-  item: ToolbarGroupItem;
-}
-
-/**
- * The [[`Group`]] component
- */
-const ToolbarGroup = (props: ToolbarGroupProps) => {
-  const { toolbarState, refocusEditor, item: group } = props;
-  const startSeparator = includes(['start', 'both'], group.separator) && (
-    <ToolbarSeparator toolbarState={toolbarState} />
-  );
-  const endSeparator = includes(['end', 'both'], group.separator) && (
-    <ToolbarSeparator toolbarState={toolbarState} />
-  );
-
-  return (
-    <>
-      {startSeparator}
-      <Group aria-label={group.label}>
-        {group.items.map(getToolbarComponent({ toolbarState, refocusEditor }))}
-      </Group>
-      {endSeparator}
-    </>
-  );
-};
-
-interface ToolbarButtonProps extends BaseToolbarProps {
-  /**
-   * The command button item.
-   */
-  item: ToolbarButtonItem;
-}
-
-const ToolbarButton = (props: ToolbarButtonProps) => {
-  const { toolbarState, focusable, item } = props;
-  const context = useRemirrorContext();
-  const refocusEditor = item.refocusEditor ?? props.refocusEditor ?? false;
-
-  const { disabled, label, icon, active = false } = item;
-  const onClick = useCallback(
-    (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
-      item.onClick(event, context);
-
-      if (refocusEditor) {
-        requestAnimationFrame(() => context.commands.focus());
-      }
-    },
-    [refocusEditor, context, item],
-  );
-
-  return (
-    <BaseToolbarButton
-      toolbarState={toolbarState}
-      disabled={disabled}
-      focusable={focusable}
-      onClick={onClick}
-      active={active}
-    >
-      <Box as='span'>{label}</Box>
-      {icon && <CommandIconComponent icon={icon} />}
-    </BaseToolbarButton>
-  );
-};
-
-/**
- * Create a mapping function for generating a toolbar component
- */
-function getToolbarComponent(props: BaseToolbarProps) {
-  // eslint-disable-next-line react/display-name
-  return (item: ToolbarItemUnion, index: number, _: ToolbarItemUnion[]) => {
-    const { toolbarState, refocusEditor } = props;
-
-    switch (item.type) {
-      case ComponentItem.ToolbarCommandButton:
-        return (
-          <ToolbarCommandButton
-            item={item}
-            toolbarState={toolbarState}
-            refocusEditor={refocusEditor}
-            key={item.key ?? index}
-          />
-        );
-
-      case ComponentItem.ToolbarButton:
-        return (
-          <ToolbarButton
-            item={item}
-            toolbarState={toolbarState}
-            refocusEditor={refocusEditor}
-            key={item.key ?? index}
-          />
-        );
-
-      case ComponentItem.ToolbarGroup:
-        return (
-          <ToolbarGroup
-            item={item}
-            toolbarState={toolbarState}
-            refocusEditor={refocusEditor}
-            key={item.key ?? index}
-          />
-        );
-
-      case ComponentItem.ToolbarSeparator:
-        return <ToolbarSeparator toolbarState={toolbarState} key={item.key ?? index} />;
-
-      case ComponentItem.ToolbarElement:
-        return item.element;
-
-      case ComponentItem.ToolbarComponent:
-        return (
-          <item.Component
-            Wrapper={ReakitToolbarItem}
-            toolbarState={toolbarState}
-            key={item.key ?? index}
-          />
-        );
-
-      case ComponentItem.ToolbarMenu:
-        return <ToolbarMenu item={item} toolbarState={toolbarState} key={item.key ?? index} />;
-    }
-  };
-}
-
-interface ToolbarMenuProps extends BaseToolbarProps {
-  item: ToolbarMenuItem;
-}
-
-const ToolbarMenu = (props: ToolbarMenuProps): JSX.Element => {
-  const { item, toolbarState } = props;
-  const { items, label, menuLabel } = item;
-
-  return (
-    <ReakitToolbarItem
-      {...toolbarState}
-      as={DropdownComponent}
-      menuItems={items}
-      label={label}
-      menuLabel={menuLabel}
-    />
-  );
-};
+export * from './base-toolbar';
+export * from './floating-toolbar';
+export * from './markdown-toolbar';
+export * from './vertical-divider';
+export * from './wysiwyg-toolbar';
diff --git a/packages/remirror__react-components/src/toolbar/markdown-toolbar.tsx b/packages/remirror__react-components/src/toolbar/markdown-toolbar.tsx
new file mode 100644
index 0000000000..c25199a29a
--- /dev/null
+++ b/packages/remirror__react-components/src/toolbar/markdown-toolbar.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { CommandButtonGroup, HeadingLevelButtonGroup, HistoryButtonGroup } from '../button-groups';
+import {
+  ToggleBlockquoteButton,
+  ToggleBoldButton,
+  ToggleCodeBlockButton,
+  ToggleCodeButton,
+  ToggleItalicButton,
+  ToggleStrikeButton,
+} from '../buttons';
+import { Toolbar } from './base-toolbar';
+import { VerticalDivider } from './vertical-divider';
+
+export const MarkdownToolbar: FC = () => {
+  return (
+    <Toolbar>
+      <CommandButtonGroup>
+        <ToggleBoldButton />
+        <ToggleItalicButton />
+        <ToggleStrikeButton />
+        <ToggleCodeButton />
+      </CommandButtonGroup>
+      <VerticalDivider />
+      <HeadingLevelButtonGroup showAll />
+      <VerticalDivider />
+      <CommandButtonGroup>
+        <ToggleBlockquoteButton />
+        <ToggleCodeBlockButton />
+      </CommandButtonGroup>
+      <VerticalDivider />
+      <HistoryButtonGroup />
+    </Toolbar>
+  );
+};
diff --git a/packages/remirror__react-components/src/toolbar/vertical-divider.tsx b/packages/remirror__react-components/src/toolbar/vertical-divider.tsx
new file mode 100644
index 0000000000..70127d6c0e
--- /dev/null
+++ b/packages/remirror__react-components/src/toolbar/vertical-divider.tsx
@@ -0,0 +1,8 @@
+import { Divider, DividerProps } from '@mui/material';
+import React, { FC } from 'react';
+
+export type VerticalDividerProps = Omit<DividerProps, 'orientation'>;
+
+export const VerticalDivider: FC<VerticalDividerProps> = (props) => {
+  return <Divider flexItem sx={{ mx: 0.5 }} {...props} orientation='vertical' />;
+};
diff --git a/packages/remirror__react-components/src/toolbar/wysiwyg-toolbar.tsx b/packages/remirror__react-components/src/toolbar/wysiwyg-toolbar.tsx
new file mode 100644
index 0000000000..6513581f82
--- /dev/null
+++ b/packages/remirror__react-components/src/toolbar/wysiwyg-toolbar.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import {
+  BasicFormattingButtonGroup,
+  DataTransferButtonGroup,
+  HeadingLevelButtonGroup,
+  HistoryButtonGroup,
+  ListButtonGroup,
+} from '../button-groups';
+import { CreateTableButton } from '../buttons';
+import { Toolbar } from './base-toolbar';
+import { VerticalDivider } from './vertical-divider';
+
+export const WysiwygToolbar: FC = () => {
+  return (
+    <Toolbar>
+      <HistoryButtonGroup />
+      <VerticalDivider />
+      <DataTransferButtonGroup />
+      <VerticalDivider />
+      <HeadingLevelButtonGroup />
+      <VerticalDivider />
+      <BasicFormattingButtonGroup />
+      <VerticalDivider />
+      <ListButtonGroup>
+        <CreateTableButton />
+      </ListButtonGroup>
+    </Toolbar>
+  );
+};
diff --git a/packages/remirror__react-components/src/use-command-option-values.ts b/packages/remirror__react-components/src/use-command-option-values.ts
new file mode 100644
index 0000000000..57649f1664
--- /dev/null
+++ b/packages/remirror__react-components/src/use-command-option-values.ts
@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import type { CommandDecoratorMessageProps, CommandUiIcon } from '@remirror/core';
+import type { CoreIcon } from '@remirror/icons';
+import { useHelpers, useI18n } from '@remirror/react-core';
+
+import {
+  getCommandOptionValue,
+  getShortcutString,
+  getUiShortcutString,
+} from './react-component-utils';
+
+export interface UseCommandOptionValuesParams extends Omit<CommandDecoratorMessageProps, 't'> {
+  commandName: string;
+}
+
+export interface UseCommandOptionValuesResult {
+  description?: string;
+  label?: string;
+  icon?: CoreIcon | CommandUiIcon;
+  shortcut?: string;
+}
+
+export const useCommandOptionValues = ({
+  commandName,
+  active,
+  enabled,
+  attrs,
+}: UseCommandOptionValuesParams): UseCommandOptionValuesResult => {
+  const { t } = useI18n();
+  const { getCommandOptions } = useHelpers();
+  const options = getCommandOptions(commandName);
+
+  const { description, label, icon, shortcut } = options || {};
+  const commandProps: CommandDecoratorMessageProps = useMemo(() => {
+    return { active, attrs, enabled, t };
+  }, [active, attrs, enabled, t]);
+
+  const shortcutString: string | undefined = useMemo(() => {
+    if (!shortcut) {
+      return;
+    }
+
+    return getShortcutString(getUiShortcutString(shortcut, attrs ?? {}), { t, separator: '' });
+  }, [shortcut, attrs, t]);
+
+  return useMemo(() => {
+    return {
+      description: getCommandOptionValue(description, commandProps),
+      label: getCommandOptionValue(label, commandProps),
+      icon: getCommandOptionValue(icon, commandProps),
+      shortcut: shortcutString,
+    };
+  }, [commandProps, description, label, icon, shortcutString]);
+};
diff --git a/packages/remirror__react-components/src/components/use-isomorphic-layout-effect.ts b/packages/remirror__react-components/src/use-isomorphic-layout-effect.ts
similarity index 100%
rename from packages/remirror__react-components/src/components/use-isomorphic-layout-effect.ts
rename to packages/remirror__react-components/src/use-isomorphic-layout-effect.ts
diff --git a/packages/remirror__react-components/src/use-popper.ts b/packages/remirror__react-components/src/use-popper.ts
index 3f8b353474..bb3deb8af0 100644
--- a/packages/remirror__react-components/src/use-popper.ts
+++ b/packages/remirror__react-components/src/use-popper.ts
@@ -10,11 +10,11 @@ import {
   useRef,
   useState,
 } from 'react';
-import { isUA, shallowEqual } from 'reakit-utils';
+import { environment, isEqual, isSafari } from '@remirror/core';
 
-import { useIsomorphicLayoutEffect } from './components/use-isomorphic-layout-effect';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
-const isSafari = isUA('Mac') && !isUA('Chrome') && isUA('Safari');
+const isSafariBrowser = environment.isBrowser && isSafari();
 
 export interface PopperState {
   /**
@@ -96,7 +96,7 @@ export interface PopperStateReturn extends PopperState, PopperActions {}
 
 function applyStyles(styles?: Partial<CSSStyleDeclaration>) {
   return (prevStyles: CSSProperties) => {
-    if (styles && !shallowEqual(prevStyles, styles)) {
+    if (styles && !isEqual(prevStyles, styles)) {
       return styles as CSSProperties;
     }
 
@@ -162,7 +162,7 @@ export function usePopper(props: UsePopperProps = {}): PopperStateReturn {
         // Safari needs styles to be applied in the first render, otherwise
         // hovering over the popover when it gets visible for the first time
         // will change its dimensions unexpectedly.
-        onFirstUpdate: isSafari ? updateState : undefined,
+        onFirstUpdate: isSafariBrowser ? updateState : undefined,
         modifiers: [
           {
             // https://popper.js.org/docs/v2/modifiers/event-listeners/
diff --git a/packages/remirror__react-editors/src/components/bubble-menu.tsx b/packages/remirror__react-editors/src/components/bubble-menu.tsx
index 36d42868d0..3cc9bfe04b 100644
--- a/packages/remirror__react-editors/src/components/bubble-menu.tsx
+++ b/packages/remirror__react-editors/src/components/bubble-menu.tsx
@@ -1,23 +1,9 @@
 import React, { FC } from 'react';
-import { ComponentItem, FloatingToolbar, ToolbarItemUnion } from '@remirror/react';
-
-const floatingToolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleUnderline', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleStrike', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleCode', display: 'icon' },
-    ],
-  },
-];
+import { FloatingToolbar } from '@remirror/react';
 
 /**
  * Bubble menu for the pre-packaged editors
  */
 export const BubbleMenu: FC = () => {
-  return <FloatingToolbar items={floatingToolbarItems} positioner='selection' placement='bottom' />;
+  return <FloatingToolbar />;
 };
diff --git a/packages/remirror__react-editors/src/components/top-toolbar.tsx b/packages/remirror__react-editors/src/components/top-toolbar.tsx
index f05ef00d67..b9820f0c5f 100644
--- a/packages/remirror__react-editors/src/components/top-toolbar.tsx
+++ b/packages/remirror__react-editors/src/components/top-toolbar.tsx
@@ -1,88 +1,6 @@
 import React, { FC } from 'react';
-import { ComponentItem, Toolbar, ToolbarItemUnion } from '@remirror/react';
-
-const toolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'History',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'undo', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'redo', display: 'icon' },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleColumns',
-        display: 'icon',
-        attrs: { count: 2 },
-      },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Clipboard',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'copy', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'cut', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'paste', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Heading Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 1 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 2 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 3 },
-      },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleUnderline', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Lists',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleBulletList',
-        display: 'icon',
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleOrderedList',
-        display: 'icon',
-      },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleTaskList', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'createTable', display: 'icon' },
-    ],
-    separator: 'none',
-  },
-];
+import { WysiwygToolbar } from '@remirror/react';
 
 export const TopToolbar: FC = () => {
-  return <Toolbar items={toolbarItems} refocusEditor label='Top Toolbar' />;
+  return <WysiwygToolbar />;
 };
diff --git a/packages/remirror__react-editors/src/markdown/markdown-editor.tsx b/packages/remirror__react-editors/src/markdown/markdown-editor.tsx
index baa199fc9b..c37dfd74cd 100644
--- a/packages/remirror__react-editors/src/markdown/markdown-editor.tsx
+++ b/packages/remirror__react-editors/src/markdown/markdown-editor.tsx
@@ -23,12 +23,10 @@ import {
   TrailingNodeExtension,
 } from 'remirror/extensions';
 import {
-  ComponentItem,
   EditorComponent,
+  MarkdownToolbar,
   Remirror,
   ThemeProvider,
-  Toolbar,
-  ToolbarItemUnion,
   useRemirror,
 } from '@remirror/react';
 import { AllStyledComponent } from '@remirror/styles/emotion';
@@ -83,7 +81,7 @@ export const MarkdownEditor: FC<PropsWithChildren<MarkdownEditorProps>> = ({
     <AllStyledComponent>
       <ThemeProvider>
         <Remirror manager={manager} autoFocus {...rest}>
-          <Toolbar items={toolbarItems} refocusEditor label='Top Toolbar' />
+          <MarkdownToolbar />
           <EditorComponent />
           {children}
         </Remirror>
@@ -91,96 +89,3 @@ export const MarkdownEditor: FC<PropsWithChildren<MarkdownEditorProps>> = ({
     </AllStyledComponent>
   );
 };
-
-const toolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleStrike', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleCode', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Heading Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 1 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 2 },
-      },
-      {
-        type: ComponentItem.ToolbarMenu,
-
-        items: [
-          {
-            type: ComponentItem.MenuGroup,
-            role: 'radio',
-            items: [
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 3 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 4 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 5 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 6 },
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleBlockquote',
-        display: 'icon',
-      },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleCodeBlock', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'History',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'undo', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'redo', display: 'icon' },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleColumns',
-        display: 'icon',
-        attrs: { count: 2 },
-      },
-    ],
-    separator: 'none',
-  },
-];
diff --git a/packages/storybook-react/stories/extension-annotation/configurable.tsx b/packages/storybook-react/stories/extension-annotation/configurable.tsx
index f7f3bdd9e9..cc8b6904f1 100644
--- a/packages/storybook-react/stories/extension-annotation/configurable.tsx
+++ b/packages/storybook-react/stories/extension-annotation/configurable.tsx
@@ -1,25 +1,21 @@
 import 'remirror/styles/all.css';
 
-import React, { FC, useMemo, useState } from 'react';
+import React, { FC, useCallback } from 'react';
 import { uniqueId } from 'remirror';
 import {
   AnnotationExtension,
   BoldExtension,
   createCenteredAnnotationPositioner,
   ItalicExtension,
-  MarkdownExtension,
   UnderlineExtension,
 } from 'remirror/extensions';
 import {
-  Button,
-  ComponentItem,
-  ControlledDialogComponent,
+  CommandButton,
   EditorComponent,
   FloatingToolbar,
   PositionerPortal,
   Remirror,
   ThemeProvider,
-  ToolbarItemUnion,
   useCommands,
   useHelpers,
   usePositioner,
@@ -28,31 +24,6 @@ import {
 
 const simpleExtensions = [new BoldExtension({}), new UnderlineExtension(), new ItalicExtension()];
 
-interface AnnotationEditorProps {
-  onChange: (markdown: string) => void;
-}
-/**
- * The editor which is used to create the annotation. Supports formatting.
- */
-const AnnotationEditor = (props: AnnotationEditorProps) => {
-  const { manager, state } = useRemirror({
-    extensions: () => [...simpleExtensions, new MarkdownExtension({})],
-    content: '**bold** content is the _best_',
-    stringHandler: 'markdown',
-  });
-
-  return (
-    <Remirror
-      manager={manager}
-      initialContent={state}
-      autoFocus
-      onChange={({ helpers }) => {
-        props.onChange(helpers.getMarkdown());
-      }}
-    />
-  );
-};
-
 const Configurable: FC = () => {
   const { manager, state } = useRemirror({
     extensions: () => [...simpleExtensions, new AnnotationExtension()],
@@ -71,30 +42,32 @@ const Configurable: FC = () => {
 };
 
 const FloatingAnnotations = () => {
-  const [visible, setVisible] = useState(false);
-  const commands = useCommands();
+  const { addAnnotation } = useCommands();
   const { getAnnotationsAt } = useHelpers();
-  const floatingToolbarItems = useMemo<ToolbarItemUnion[]>(
-    () => [
-      {
-        type: ComponentItem.ToolbarButton,
-        onClick: () => {
-          // setVisible(true);
-          commands.addAnnotation({ id: uniqueId() });
-        },
-        icon: 'chatNewLine',
-      },
-    ],
-    [commands],
-  );
+
+  const handleSelect = useCallback(() => {
+    const id = uniqueId();
+
+    if (addAnnotation.enabled({ id })) {
+      addAnnotation({ id });
+    }
+  }, [addAnnotation]);
 
   const annotations = getAnnotationsAt();
   const label = annotations.map((annotation) => annotation.text).join('\n');
   const positioner = usePositioner(createCenteredAnnotationPositioner(getAnnotationsAt), []);
+  const enabled = addAnnotation.enabled({ id: '' });
 
   return (
     <>
-      <FloatingToolbar items={floatingToolbarItems} positioner='selection' placement='top' />
+      <FloatingToolbar>
+        <CommandButton
+          icon='chatNewLine'
+          commandName='addAnnotation'
+          enabled={enabled}
+          onSelect={handleSelect}
+        />
+      </FloatingToolbar>
       <PositionerPortal>
         <div
           style={{
@@ -110,17 +83,6 @@ const FloatingAnnotations = () => {
           {label}
         </div>
       </PositionerPortal>
-      <ControlledDialogComponent visible={visible} onUpdate={(v) => setVisible(v)} backdrop={true}>
-        <AnnotationEditor onChange={(text) => console.log(text)} />
-        <Button
-          onClick={() => {
-            commands.addAnnotation({ id: uniqueId() });
-            setVisible(false);
-          }}
-        >
-          Done
-        </Button>
-      </ControlledDialogComponent>
     </>
   );
 };
diff --git a/packages/storybook-react/stories/extension-file/file.stories.tsx b/packages/storybook-react/stories/extension-file/file.stories.tsx
index f491501024..c04ae382db 100644
--- a/packages/storybook-react/stories/extension-file/file.stories.tsx
+++ b/packages/storybook-react/stories/extension-file/file.stories.tsx
@@ -2,15 +2,7 @@ import Basic from './basic';
 import WithBashupload from './with-bashupload';
 import WithObjectUrl from './with-object-url';
 import WithUploadFileButton from './with-upload-file-button';
-import WithUploadIncompleteWarning from './with-upload-incomplete-warning';
 import WithUploadProgress from './with-upload-progress';
 
-export {
-  Basic,
-  WithBashupload,
-  WithObjectUrl,
-  WithUploadFileButton,
-  WithUploadIncompleteWarning,
-  WithUploadProgress,
-};
+export { Basic, WithBashupload, WithObjectUrl, WithUploadFileButton, WithUploadProgress };
 export default { title: 'Extensions / File' };
diff --git a/packages/storybook-react/stories/extension-file/with-upload-incomplete-warning.tsx b/packages/storybook-react/stories/extension-file/with-upload-incomplete-warning.tsx
deleted file mode 100644
index 1cecb95e1e..0000000000
--- a/packages/storybook-react/stories/extension-file/with-upload-incomplete-warning.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import 'remirror/styles/extension-file.css';
-
-import { css } from '@emotion/css';
-import React, { useCallback, useState } from 'react';
-import { DropCursorExtension } from 'remirror/extensions';
-import { hasUploadingFile } from '@remirror/core';
-import { createSlowFileUploader, FileExtension } from '@remirror/extension-file';
-import {
-  Button,
-  ControlledDialogComponent,
-  Remirror,
-  ThemeProvider,
-  useHelpers,
-  useRemirror,
-  useRemirrorContext,
-} from '@remirror/react';
-
-const WithUploadIncompleteWarning = (): JSX.Element => {
-  const extensions = useCallback(
-    () => [
-      new FileExtension({ uploadFileHandler: createSlowFileUploader }),
-      new DropCursorExtension(),
-    ],
-    [],
-  );
-  const { manager, state } = useRemirror({ extensions, content, stringHandler: 'html' });
-
-  return (
-    <>
-      <p>
-        Click the save button below <strong>while a file is uploading</strong>. You will see a
-        warning dialog.
-      </p>
-      <ThemeProvider>
-        <Remirror manager={manager} initialContent={state} autoRender='end'>
-          <SaveButton />
-        </Remirror>
-      </ThemeProvider>
-    </>
-  );
-};
-
-const content = `<p>Drag and drop one or multiple non-image files into the editor.</p>`;
-
-const SaveButton: React.FC = () => {
-  const [showWarning, setShowWarning] = useState<boolean>(false);
-  const [showSaved, setShowSaved] = useState<boolean>(false);
-  const { getState } = useRemirrorContext();
-  const { getJSON } = useHelpers();
-
-  const onSave = useCallback(
-    (forceSave = false) => {
-      const state = getState();
-
-      if (!forceSave) {
-        const isUploading = hasUploadingFile(state);
-
-        if (isUploading) {
-          setShowWarning(true);
-          return;
-        }
-      }
-
-      console.log('JSON state', getJSON(state));
-      setShowSaved(true);
-    },
-    [getState, getJSON],
-  );
-
-  return (
-    <>
-      <Button onClick={() => onSave()}>Save</Button>
-      <ControlledDialogComponent
-        visible={showWarning}
-        onUpdate={(v) => setShowWarning(v)}
-        backdrop={false}
-      >
-        <p>Warning, you have incomplete file uploads</p>
-        <div
-          className={css`
-            display: flex;
-            justify-content: space-between;
-          `}
-        >
-          <Button onClick={() => setShowWarning(false)}>Cancel</Button>
-          <Button onClick={() => onSave(true)}>Save anyway</Button>
-        </div>
-      </ControlledDialogComponent>
-      <ControlledDialogComponent
-        visible={showSaved}
-        onUpdate={(v) => setShowSaved(v)}
-        backdrop={false}
-      >
-        <p>Content saved. (See console)</p>
-        <div
-          className={css`
-            display: flex;
-            justify-content: center;
-          `}
-        >
-          <Button onClick={() => setShowSaved(false)}>Ok</Button>
-        </div>
-      </ControlledDialogComponent>
-    </>
-  );
-};
-
-export default WithUploadIncompleteWarning;
diff --git a/packages/storybook-react/stories/extension-link/edit-dialog.tsx b/packages/storybook-react/stories/extension-link/edit-dialog.tsx
index 6f816fe4f6..1a65d1f51f 100644
--- a/packages/storybook-react/stories/extension-link/edit-dialog.tsx
+++ b/packages/storybook-react/stories/extension-link/edit-dialog.tsx
@@ -2,13 +2,12 @@ import type { ChangeEvent, HTMLProps, KeyboardEvent } from 'react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createMarkPositioner, LinkExtension, ShortcutHandlerProps } from 'remirror/extensions';
 import {
-  ComponentItem,
+  CommandButton,
   EditorComponent,
   FloatingToolbar,
   FloatingWrapper,
   Remirror,
   ThemeProvider,
-  ToolbarItemUnion,
   useActive,
   useAttrs,
   useChainedCommands,
@@ -138,33 +137,31 @@ const FloatingLinkToolbar = () => {
   const active = useActive();
   const activeLink = active.link();
   const { empty } = useCurrentSelection();
-  const linkEditItems: ToolbarItemUnion[] = useMemo(
-    () => [
-      {
-        type: ComponentItem.ToolbarGroup,
-        label: 'Link',
-        items: activeLink
-          ? [
-              { type: ComponentItem.ToolbarButton, onClick: () => clickEdit(), icon: 'pencilLine' },
-              { type: ComponentItem.ToolbarButton, onClick: onRemove, icon: 'linkUnlink' },
-            ]
-          : [{ type: ComponentItem.ToolbarButton, onClick: () => clickEdit(), icon: 'link' }],
-      },
-    ],
-    [clickEdit, onRemove, activeLink],
-  );
 
-  const items: ToolbarItemUnion[] = useMemo(() => linkEditItems, [linkEditItems]);
+  const handleClickEdit = useCallback(() => {
+    clickEdit();
+  }, [clickEdit]);
 
-  return (
+  const linkEditButtons = activeLink ? (
     <>
-      <FloatingToolbar items={items} positioner='selection' placement='top' enabled={!isEditing} />
-      <FloatingToolbar
-        items={linkEditItems}
-        positioner={linkPositioner}
-        placement='bottom'
-        enabled={!isEditing && empty}
+      <CommandButton
+        commandName='updateLink'
+        onSelect={handleClickEdit}
+        icon='pencilLine'
+        enabled
       />
+      <CommandButton commandName='removeLink' onSelect={onRemove} icon='linkUnlink' enabled />
+    </>
+  ) : (
+    <CommandButton commandName='updateLink' onSelect={handleClickEdit} icon='link' enabled />
+  );
+
+  return (
+    <>
+      {!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
+      {!isEditing && empty && (
+        <FloatingToolbar positioner={linkPositioner}>{linkEditButtons}</FloatingToolbar>
+      )}
 
       <FloatingWrapper
         positioner='always'
diff --git a/packages/storybook-react/stories/react-components/floating-menu.stories.tsx b/packages/storybook-react/stories/react-components/floating-menu.stories.tsx
index cee1a4fa4b..fc30fcb29a 100644
--- a/packages/storybook-react/stories/react-components/floating-menu.stories.tsx
+++ b/packages/storybook-react/stories/react-components/floating-menu.stories.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import { ColumnsExtension, wysiwygPreset } from 'remirror/extensions';
 import {
-  ComponentItem,
   EditorComponent,
-  FloatingActionsMenu,
   FloatingToolbar,
-  MenuActionItemUnion,
+  HeadingLevelButtonGroup,
   Remirror,
   ThemeProvider,
-  ToolbarItemUnion,
   useRemirror,
 } from '@remirror/react';
 
@@ -16,95 +13,8 @@ import { hugeContent } from './sample-content/huge';
 
 export default { title: 'Components (labs) / Floating Menu' };
 
-const floatingActions: MenuActionItemUnion[] = [
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 1 },
-    tags: ['heading', '1', 'one'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 1 },
-    tags: ['heading', '1', 'one'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 2 },
-    tags: ['heading', '2', 'two'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 3 },
-    tags: ['heading', '3', 'three'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 4 },
-    tags: ['heading', '4', 'four'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 5 },
-    tags: ['heading', '5', 'five'],
-  },
-  {
-    type: ComponentItem.MenuCommandAction,
-    commandName: 'toggleHeading',
-    attrs: { level: 6 },
-    tags: ['heading', '6', 'six'],
-  },
-  { type: ComponentItem.MenuCommandAction, commandName: 'toggleBold', tags: ['bold'] },
-  { type: ComponentItem.MenuCommandAction, commandName: 'toggleItalic', tags: ['italic'] },
-  { type: ComponentItem.MenuCommandAction, commandName: 'toggleUnderline', tags: ['underline'] },
-];
-
-const floatingToolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleUnderline', display: 'icon' },
-    ],
-  },
-];
-
 const extensions = () => [...wysiwygPreset(), new ColumnsExtension()];
 
-const floatingBlockToolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 1 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 2 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 3 },
-      },
-    ],
-  },
-];
-
 export const FloatingBlockNodeEditor = () => {
   const { manager, state } = useRemirror({
     extensions,
@@ -116,28 +26,9 @@ export const FloatingBlockNodeEditor = () => {
     <ThemeProvider>
       <Remirror manager={manager} initialContent={state} autoFocus>
         <EditorComponent />
-        <FloatingToolbar
-          items={floatingBlockToolbarItems}
-          placement='right-end'
-          positioner='emptyBlockStart'
-        />
-      </Remirror>
-    </ThemeProvider>
-  );
-};
-
-export const ActionsEditor = () => {
-  const { manager, state } = useRemirror({
-    extensions,
-    selection: 'end',
-    stringHandler: 'html',
-  });
-
-  return (
-    <ThemeProvider>
-      <Remirror manager={manager} initialContent={state} autoFocus>
-        <EditorComponent />
-        <FloatingActionsMenu actions={floatingActions} />
+        <FloatingToolbar positioner='emptyBlockStart'>
+          <HeadingLevelButtonGroup />
+        </FloatingToolbar>
       </Remirror>
     </ThemeProvider>
   );
@@ -155,7 +46,7 @@ export const EditorWithLotsOfContent = () => {
     <ThemeProvider>
       <Remirror manager={manager} initialContent={state} autoFocus>
         <EditorComponent />
-        <FloatingToolbar items={floatingToolbarItems} positioner='selection' />
+        <FloatingToolbar />
       </Remirror>
     </ThemeProvider>
   );
diff --git a/packages/storybook-react/stories/react-components/toolbar.stories.tsx b/packages/storybook-react/stories/react-components/toolbar.stories.tsx
index cb96fac259..88f94d4834 100644
--- a/packages/storybook-react/stories/react-components/toolbar.stories.tsx
+++ b/packages/storybook-react/stories/react-components/toolbar.stories.tsx
@@ -1,125 +1,22 @@
+import 'remirror/styles/all.css';
+
 import React from 'react';
 import { wysiwygPreset } from 'remirror/extensions';
+import { TableExtension } from '@remirror/extension-react-tables';
 import {
-  ComponentItem,
   EditorComponent,
+  FloatingToolbar,
   Remirror,
   ThemeProvider,
-  Toolbar,
-  ToolbarItemUnion,
   useRemirror,
+  WysiwygToolbar,
 } from '@remirror/react';
 
 import { mediumContent } from './sample-content/medium';
 
 export default { title: 'Components (labs) / Toolbar' };
 
-const toolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'History',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'undo', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'redo', display: 'icon' },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleColumns',
-        display: 'icon',
-        attrs: { count: 2 },
-      },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Clipboard',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'copy', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'cut', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'paste', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleUnderline', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Heading Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 1 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 2 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 3 },
-      },
-    ],
-    separator: 'none',
-  },
-  {
-    type: ComponentItem.ToolbarMenu,
-    label: 'Headings',
-    items: [
-      {
-        type: ComponentItem.MenuGroup,
-        role: 'radio',
-        items: [
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 1 },
-          },
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 2 },
-          },
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 3 },
-          },
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 4 },
-          },
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 5 },
-          },
-          {
-            type: ComponentItem.MenuCommandPane,
-            commandName: 'toggleHeading',
-            attrs: { level: 6 },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const extensions = () => [...wysiwygPreset()];
+const extensions = () => [...wysiwygPreset(), new TableExtension()];
 
 export const FixedToolbar = () => {
   const { manager, state } = useRemirror({
@@ -132,8 +29,9 @@ export const FixedToolbar = () => {
   return (
     <ThemeProvider>
       <Remirror manager={manager} initialContent={state} autoFocus placeholder='Enter your text'>
-        <Toolbar items={toolbarItems} refocusEditor label='Top Toolbar' />
+        <WysiwygToolbar />
         <EditorComponent />
+        <FloatingToolbar />
       </Remirror>
     </ThemeProvider>
   );
diff --git a/packages/storybook-react/stories/react-editors/markdown-editor.tsx b/packages/storybook-react/stories/react-editors/markdown-editor.tsx
index 41fd065ddd..1d2c68f35e 100644
--- a/packages/storybook-react/stories/react-editors/markdown-editor.tsx
+++ b/packages/storybook-react/stories/react-editors/markdown-editor.tsx
@@ -26,12 +26,10 @@ import {
   TrailingNodeExtension,
 } from 'remirror/extensions';
 import {
-  ComponentItem,
+  MarkdownToolbar,
   ReactExtensions,
   Remirror,
   ThemeProvider,
-  Toolbar,
-  ToolbarItemUnion,
   useHelpers,
   useRemirror,
   UseRemirrorReturn,
@@ -149,7 +147,7 @@ const VisualEditor = () => {
         `,
       ]}
     >
-      <Toolbar items={toolbarItems} refocusEditor label='Top Toolbar' />
+      <MarkdownToolbar />
     </Remirror>
   );
 };
@@ -213,99 +211,6 @@ const extensions = () => [
   new HardBreakExtension(),
 ];
 
-const toolbarItems: ToolbarItemUnion[] = [
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleBold', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleItalic', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleStrike', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleCode', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Heading Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 1 },
-      },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleHeading',
-        display: 'icon',
-        attrs: { level: 2 },
-      },
-      {
-        type: ComponentItem.ToolbarMenu,
-
-        items: [
-          {
-            type: ComponentItem.MenuGroup,
-            role: 'radio',
-            items: [
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 3 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 4 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 5 },
-              },
-              {
-                type: ComponentItem.MenuCommandPane,
-                commandName: 'toggleHeading',
-                attrs: { level: 6 },
-              },
-            ],
-          },
-        ],
-      },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'Simple Formatting',
-    items: [
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleBlockquote',
-        display: 'icon',
-      },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'toggleCodeBlock', display: 'icon' },
-    ],
-    separator: 'end',
-  },
-  {
-    type: ComponentItem.ToolbarGroup,
-    label: 'History',
-    items: [
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'undo', display: 'icon' },
-      { type: ComponentItem.ToolbarCommandButton, commandName: 'redo', display: 'icon' },
-      {
-        type: ComponentItem.ToolbarCommandButton,
-        commandName: 'toggleColumns',
-        display: 'icon',
-        attrs: { count: 2 },
-      },
-    ],
-    separator: 'none',
-  },
-];
-
 const basicContent = `
 **Markdown** content is the _best_
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4b194d0d0..55440f3067 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1922,7 +1922,10 @@ importers:
   packages/remirror__react-components:
     specifiers:
       '@babel/runtime': ^7.13.10
+      '@emotion/react': ^11.9.0
+      '@emotion/styled': ^11.3.0
       '@lingui/core': ^3.14.0
+      '@mui/material': ^5.8.5
       '@popperjs/core': ^2.9.2
       '@remirror/core': ^2.0.0-beta.16
       '@remirror/extension-positioner': ^2.0.0-beta.16
@@ -1946,13 +1949,12 @@ importers:
       react: ^18.0.0
       react-color: ^2.19.3
       react-dom: ^18.0.0
-      react-popper: ^2.2.5
-      reakit: ^1.3.11
-      reakit-system-palette: ^0.14.2
-      reakit-utils: ^0.15.2
     dependencies:
       '@babel/runtime': 7.18.9
+      '@emotion/react': 11.9.0_be4640d19c7069687d6d07ca829736d3
+      '@emotion/styled': 11.3.0_8657d9292e83c4f9880e96f15f6a4a24
       '@lingui/core': 3.14.0
+      '@mui/material': 5.10.4_752cdc19be3e3b4b5ad25e7e7845f9cf
       '@popperjs/core': 2.10.2
       '@remirror/core': link:../remirror__core
       '@remirror/extension-positioner': link:../remirror__extension-positioner
@@ -1970,10 +1972,6 @@ importers:
       match-sorter: 6.3.1
       multishift: link:../multishift
       react-color: 2.19.3_react@18.0.0
-      react-popper: 2.2.5_52d169cc650b8c6d44050451817d9fd9
-      reakit: 1.3.11_react-dom@18.0.0+react@18.0.0
-      reakit-system-palette: 0.14.2_6ce68794d8a4199f38712f8527fc368a
-      reakit-utils: 0.15.2_react-dom@18.0.0+react@18.0.0
     devDependencies:
       '@remirror/pm': link:../remirror__pm
       '@remirror/react': link:../remirror__react
@@ -5722,6 +5720,16 @@ packages:
       source-map: 0.5.7
       stylis: 4.0.13
 
+  /@emotion/cache/11.10.3:
+    resolution: {integrity: sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==}
+    dependencies:
+      '@emotion/memoize': 0.8.0
+      '@emotion/sheet': 1.2.0
+      '@emotion/utils': 1.2.0
+      '@emotion/weak-memoize': 0.3.0
+      stylis: 4.0.13
+    dev: false
+
   /@emotion/cache/11.7.1:
     resolution: {integrity: sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==}
     dependencies:
@@ -5760,12 +5768,22 @@ packages:
     dependencies:
       '@emotion/memoize': 0.7.5
 
+  /@emotion/is-prop-valid/1.2.0:
+    resolution: {integrity: sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==}
+    dependencies:
+      '@emotion/memoize': 0.8.0
+    dev: false
+
   /@emotion/memoize/0.7.4:
     resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
 
   /@emotion/memoize/0.7.5:
     resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
 
+  /@emotion/memoize/0.8.0:
+    resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
+    dev: false
+
   /@emotion/react/11.9.0_be4640d19c7069687d6d07ca829736d3:
     resolution: {integrity: sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==}
     peerDependencies:
@@ -5801,6 +5819,10 @@ packages:
   /@emotion/sheet/1.1.0:
     resolution: {integrity: sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==}
 
+  /@emotion/sheet/1.2.0:
+    resolution: {integrity: sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==}
+    dev: false
+
   /@emotion/styled/11.3.0_8657d9292e83c4f9880e96f15f6a4a24:
     resolution: {integrity: sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==}
     peerDependencies:
@@ -5834,9 +5856,17 @@ packages:
   /@emotion/utils/1.1.0:
     resolution: {integrity: sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==}
 
+  /@emotion/utils/1.2.0:
+    resolution: {integrity: sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==}
+    dev: false
+
   /@emotion/weak-memoize/0.2.5:
     resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
 
+  /@emotion/weak-memoize/0.3.0:
+    resolution: {integrity: sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==}
+    dev: false
+
   /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_ab32f33b18941edd23f94d710936753e:
     resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==}
     engines: {node: '>=10.0.0'}
@@ -7040,6 +7070,164 @@ packages:
       call-me-maybe: 1.0.1
       glob-to-regexp: 0.3.0
 
+  /@mui/base/5.0.0-alpha.96_5c0ae146579744f001b6734b6de3341a:
+    resolution: {integrity: sha512-GZf2YguepLFMWGG8vQNLRl7FlXPDeyxQBYgrkHxwNJYeRw55rrGrJxHzL1iCbk71VZ2IIAIs5IAxNpyHK9iqPQ==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@emotion/is-prop-valid': 1.2.0
+      '@mui/types': 7.2.0_@types+react@18.0.15
+      '@mui/utils': 5.10.3_react@18.0.0
+      '@popperjs/core': 2.11.6
+      '@types/react': 18.0.15
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.0.0
+      react-dom: 18.0.0_react@18.0.0
+      react-is: 18.2.0
+    dev: false
+
+  /@mui/core-downloads-tracker/5.10.4:
+    resolution: {integrity: sha512-VGekVa9dleJ+ii47+gXvKUV5a11T0nsjXN8bk5NqiJRQWRCAhbTHgsfZuctNcMeLW9FSf2gu6U0k2U6rhABKcA==}
+    dev: false
+
+  /@mui/material/5.10.4_752cdc19be3e3b4b5ad25e7e7845f9cf:
+    resolution: {integrity: sha512-uwupjunU3p8XxZU4f2zF1GYlwB9GDxW1H05BMDPSh0u+37yLxuQDMMxwQQPUo9jSA5Y22/eR4Y71ScxKU89QHg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@emotion/react': 11.9.0_be4640d19c7069687d6d07ca829736d3
+      '@emotion/styled': 11.3.0_8657d9292e83c4f9880e96f15f6a4a24
+      '@mui/base': 5.0.0-alpha.96_5c0ae146579744f001b6734b6de3341a
+      '@mui/core-downloads-tracker': 5.10.4
+      '@mui/system': 5.10.4_bccb05e7fd1d1c3fdb3e93786ede0b87
+      '@mui/types': 7.2.0_@types+react@18.0.15
+      '@mui/utils': 5.10.3_react@18.0.0
+      '@types/react': 18.0.15
+      '@types/react-transition-group': 4.4.5
+      clsx: 1.2.1
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.0.0
+      react-dom: 18.0.0_react@18.0.0
+      react-is: 18.2.0
+      react-transition-group: 4.4.5_react-dom@18.0.0+react@18.0.0
+    dev: false
+
+  /@mui/private-theming/5.10.3_6117da77cd3b6b401e4daff8ae989aad:
+    resolution: {integrity: sha512-LCYIKlkGz2BTSng2BFzzwSJBRZbChIUri2x2Nh8ryk2B1Ho7zpvE7ex6y39LlStG2Frf92NFC/V4YQbmMAjD5A==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@mui/utils': 5.10.3_react@18.0.0
+      '@types/react': 18.0.15
+      prop-types: 15.8.1
+      react: 18.0.0
+    dev: false
+
+  /@mui/styled-engine/5.10.4_46161eb7ef9193a804e9902cbc2aae0b:
+    resolution: {integrity: sha512-y29qlonPj4wndTjbePk9O6uWp/FBRNXjiMwI64oiYQ+v3E0EkLnADfDn49GAqOJAfN/r7nHbVZBlvLNIcMbgDg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@emotion/cache': 11.10.3
+      '@emotion/react': 11.9.0_be4640d19c7069687d6d07ca829736d3
+      '@emotion/styled': 11.3.0_8657d9292e83c4f9880e96f15f6a4a24
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.0.0
+    dev: false
+
+  /@mui/system/5.10.4_bccb05e7fd1d1c3fdb3e93786ede0b87:
+    resolution: {integrity: sha512-fE7LtYStPHPfq7EJXEVLQGvz23pS5YwSI7A4mWEFyyW21hHUh0c1opZXb7caHJsUTiBoC22W7R8GGfbVdSOnZA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@emotion/react': 11.9.0_be4640d19c7069687d6d07ca829736d3
+      '@emotion/styled': 11.3.0_8657d9292e83c4f9880e96f15f6a4a24
+      '@mui/private-theming': 5.10.3_6117da77cd3b6b401e4daff8ae989aad
+      '@mui/styled-engine': 5.10.4_46161eb7ef9193a804e9902cbc2aae0b
+      '@mui/types': 7.2.0_@types+react@18.0.15
+      '@mui/utils': 5.10.3_react@18.0.0
+      '@types/react': 18.0.15
+      clsx: 1.2.1
+      csstype: 3.1.0
+      prop-types: 15.8.1
+      react: 18.0.0
+    dev: false
+
+  /@mui/types/7.2.0_@types+react@18.0.15:
+    resolution: {integrity: sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==}
+    peerDependencies:
+      '@types/react': '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.15
+    dev: false
+
+  /@mui/utils/5.10.3_react@18.0.0:
+    resolution: {integrity: sha512-4jXMDPfx6bpMVuheLaOpKTjpzw39ogAZLeaLj5+RJec3E37/hAZMYjURfblLfTWMMoGoqkY03mNsZaEwNobBow==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.18.9
+      '@types/prop-types': 15.7.5
+      '@types/react-is': 17.0.3
+      prop-types: 15.8.1
+      react: 18.0.0
+      react-is: 18.2.0
+    dev: false
+
   /@nicolo-ribaudo/chokidar-2/2.1.8-no-fsevents.3:
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
     requiresBuild: true
@@ -7321,6 +7509,10 @@ packages:
     resolution: {integrity: sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==}
     dev: false
 
+  /@popperjs/core/2.11.6:
+    resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
+    dev: false
+
   /@preconstruct/cli/2.1.5:
     resolution: {integrity: sha512-bMnGTkaotxq+xoOkXoUOfTFvxBX/ZUxukcacf3mx3G7Iz5m/T4ZGzSOU12pxl64e+rVWGTKlUsgaDSgyFkup0A==}
     hasBin: true
@@ -10028,6 +10220,12 @@ packages:
       '@types/react': 18.0.15
     dev: true
 
+  /@types/react-is/17.0.3:
+    resolution: {integrity: sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==}
+    dependencies:
+      '@types/react': 18.0.18
+    dev: false
+
   /@types/react-router-config/5.0.6:
     resolution: {integrity: sha512-db1mx37a1EJDf1XeX8jJN7R3PZABmJQXR8r28yUjVMFSjkmnQo6X6pOEEmNl+Tp2gYQOGPdYbFIipBtdElZ3Yg==}
     dependencies:
@@ -10069,6 +10267,12 @@ packages:
       '@types/react': 18.0.15
     dev: false
 
+  /@types/react-transition-group/4.4.5:
+    resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==}
+    dependencies:
+      '@types/react': 18.0.18
+    dev: false
+
   /@types/react/18.0.15:
     resolution: {integrity: sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==}
     dependencies:
@@ -10082,7 +10286,6 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.0
-    dev: true
 
   /@types/reactcss/1.2.6:
     resolution: {integrity: sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==}
@@ -12862,7 +13065,6 @@ packages:
   /clsx/1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
-    dev: true
 
   /co/4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
@@ -12969,19 +13171,13 @@ packages:
     dependencies:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
+    dev: true
 
   /color-support/1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
     dev: true
 
-  /color/3.1.3:
-    resolution: {integrity: sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==}
-    dependencies:
-      color-convert: 1.9.3
-      color-string: 1.9.1
-    dev: false
-
   /color/4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -14306,6 +14502,13 @@ packages:
       utila: 0.4.0
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.18.9
+      csstype: 3.1.0
+    dev: false
+
   /dom-iterator/1.0.0:
     resolution: {integrity: sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==}
     dependencies:
@@ -18272,6 +18475,7 @@ packages:
 
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: true
 
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -23914,6 +24118,7 @@ packages:
 
   /react-fast-compare/3.2.0:
     resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==}
+    dev: true
 
   /react-helmet-async/1.3.0_react-dom@18.0.0+react@18.0.0:
     resolution: {integrity: sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==}
@@ -23958,6 +24163,10 @@ packages:
   /react-is/18.0.0:
     resolution: {integrity: sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==}
 
+  /react-is/18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: false
+
   /react-json-view/1.21.3_5c0ae146579744f001b6734b6de3341a:
     resolution: {integrity: sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==}
     peerDependencies:
@@ -24009,18 +24218,6 @@ packages:
       webpack: 5.73.0_@swc+core@1.2.204
     dev: true
 
-  /react-popper/2.2.5_52d169cc650b8c6d44050451817d9fd9:
-    resolution: {integrity: sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==}
-    peerDependencies:
-      '@popperjs/core': ^2.0.0
-      react: ^16.8.0 || ^17
-    dependencies:
-      '@popperjs/core': 2.10.2
-      react: 18.0.0
-      react-fast-compare: 3.2.0
-      warning: 4.0.3
-    dev: false
-
   /react-refresh/0.11.0:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}
@@ -24127,6 +24324,20 @@ packages:
       - '@types/react'
     dev: true
 
+  /react-transition-group/4.4.5_react-dom@18.0.0+react@18.0.0:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    dependencies:
+      '@babel/runtime': 7.18.9
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.0.0
+      react-dom: 18.0.0_react@18.0.0
+    dev: false
+
   /react-universal-interface/0.6.2_react@18.0.0+tslib@2.4.0:
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
@@ -24304,20 +24515,6 @@ packages:
     resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
     dev: true
 
-  /reakit-system-palette/0.14.2_6ce68794d8a4199f38712f8527fc368a:
-    resolution: {integrity: sha512-vJlVBM+21xeJ8BuH+ck0wjLrzjEq6uG1Yj6jJoLT1a2F8kMSJNkZAhnXmlUgJgjLOOPYDpIhqcBQGGSGWxqudw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
-      reakit: ^1.0.0
-    dependencies:
-      color: 3.1.3
-      react: 18.0.0
-      react-dom: 18.0.0_react@18.0.0
-      reakit: 1.3.11_react-dom@18.0.0+react@18.0.0
-      reakit-system: 0.15.2_react-dom@18.0.0+react@18.0.0
-    dev: false
-
   /reakit-system/0.15.2_react-dom@18.0.0+react@18.0.0:
     resolution: {integrity: sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA==}
     peerDependencies:
@@ -25477,6 +25674,7 @@ packages:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
     dependencies:
       is-arrayish: 0.3.2
+    dev: true
 
   /sirv/1.0.18:
     resolution: {integrity: sha512-f2AOPogZmXgJ9Ma2M22ZEhc1dNtRIzcEkiflMFeVTRq+OViOZMvH1IPMVOwrKaxpSaHioBJiDR0SluRqGa7atA==}
@@ -27867,12 +28065,6 @@ packages:
     dependencies:
       makeerror: 1.0.12
 
-  /warning/4.0.3:
-    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
-    dependencies:
-      loose-envify: 1.4.0
-    dev: false
-
   /watchpack-chokidar2/2.0.1:
     resolution: {integrity: sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==}
     requiresBuild: true
diff --git a/support/scripts/data/icons.json b/support/scripts/data/icons.json
index 3fc669f09f..dfd2271777 100644
--- a/support/scripts/data/icons.json
+++ b/support/scripts/data/icons.json
@@ -65,6 +65,7 @@
     "bring-forward.svg",
     "bring-to-front.svg",
     "code-view.svg",
+    "checkbox-multiple-line.svg",
     "delete-column.svg",
     "delete-row.svg",
     "double-quotes-l.svg",
diff --git a/website/extension-examples/extension-file/with-upload-incomplete-warning.tsx b/website/extension-examples/extension-file/with-upload-incomplete-warning.tsx
deleted file mode 100644
index fa8ef52f2f..0000000000
--- a/website/extension-examples/extension-file/with-upload-incomplete-warning.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * THIS FILE IS AUTO GENERATED!
- *
- * Run `pnpm -w generate:website-examples` to regenerate this file.
- */
-
-// @ts-nocheck
-
-import React from 'react';
-import CodeBlock from '@theme/CodeBlock';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import ComponentSource from '!!raw-loader!../../../packages/storybook-react/stories/extension-file/with-upload-incomplete-warning.tsx';
-
-import { StoryExample } from '../../src/components/story-example-component';
-
-const ExampleComponent = (): JSX.Element => {
-  const story = (
-    <BrowserOnly>
-      {() => {
-        const ComponentStory = require('../../../packages/storybook-react/stories/extension-file/with-upload-incomplete-warning').default
-        return <ComponentStory/>
-      }}
-    </BrowserOnly>
-  );
-  const source = <CodeBlock className='language-tsx'>{ComponentSource}</CodeBlock>;
-
-  return <StoryExample story={story} source={source} />;
-};
-
-export default ExampleComponent;
-  
\ No newline at end of file