diff --git a/src/theme/MDXComponents/index.js b/src/theme/MDXComponents/index.js
new file mode 100644
index 000000000..9c52788c9
--- /dev/null
+++ b/src/theme/MDXComponents/index.js
@@ -0,0 +1,39 @@
+import React from "react";
+import Head from "@docusaurus/Head";
+import MDXCode from "@theme/MDXComponents/Code";
+import MDXA from "@theme/MDXComponents/A";
+import MDXPre from "@theme/MDXComponents/Pre";
+import MDXDetails from "@theme/MDXComponents/Details";
+import MDXHeading from "@theme/MDXComponents/Heading";
+import MDXUl from "@theme/MDXComponents/Ul";
+import MDXLi from "@theme/MDXComponents/Li";
+import MDXImg from "@theme/MDXComponents/Img";
+import Admonition from "@theme/Admonition";
+import Mermaid from "@theme/Mermaid";
+
+const MDXComponents = {
+  Head,
+  details: MDXDetails,
+  Details: MDXDetails,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  ul: MDXUl,
+  li: MDXLi,
+  img: MDXImg,
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+  table: (props) => (
+    <div style={{ overflowX: "auto" }} tabIndex={0}>
+      <table {...props} />
+    </div>
+  ),
+};
+
+export default MDXComponents;