diff --git a/src/components/mdx/Grid.tsx b/src/components/mdx/Grid.tsx
new file mode 100644
index 00000000..f0dfe91e
--- /dev/null
+++ b/src/components/mdx/Grid.tsx
@@ -0,0 +1,16 @@
+export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?: number }) => (
+  <ul
+    className={`grid sm:grid-cols-2 ${
+      cols === 4
+        ? 'md:grid-cols-4'
+        : cols === 3
+        ? 'md:grid-cols-3'
+        : cols === 2
+        ? 'md:grid-cols-2'
+        : 'md:grid-cols-1'
+    } gap-4 text-sm text-gray-700 grid-list`}
+    style={{ marginBottom: '1rem' }}
+  >
+    {children}
+  </ul>
+)
diff --git a/src/components/mdx/Hint.tsx b/src/components/mdx/Hint.tsx
new file mode 100644
index 00000000..2aa9de9c
--- /dev/null
+++ b/src/components/mdx/Hint.tsx
@@ -0,0 +1,7 @@
+export const Hint = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="hint shadow overflow-hidden bg-yellow-100 border-b border-gray-200 sm:rounded-lg px-6 py-4 mb-6 dark:text-gray-500">
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
new file mode 100644
index 00000000..5e83273f
--- /dev/null
+++ b/src/components/mdx/index.tsx
@@ -0,0 +1,96 @@
+import { MARKDOWN_REGEX } from '@/utils/docs'
+
+export * from './Grid'
+export * from './Hint'
+
+export const h2 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+  <a href={`#${id}`} className="heading text-3xl mb-6 mt-8 tracking-light">
+    <h2 id={id}>{children}</h2>
+  </a>
+)
+const h3 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+  <a href={`#${id}`} className="heading text-xl mb-4 mt-6 tracking-light">
+    <h3 id={id}>{children}</h3>
+  </a>
+)
+const h4 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+  <a href={`#${id}`} className="heading text-base mb-4 mt-4 tracking-light">
+    <h4 id={id}>{children}</h4>
+  </a>
+)
+
+const ul = ({ children }: { children: React.ReactNode }) => (
+  <ul className="px-4 mb-8">{children}</ul>
+)
+const ol = ({ children }: { children: React.ReactNode }) => (
+  <ol className="px-4 mb-8">{children}</ol>
+)
+const li = ({ children }: { children: React.ReactNode }) => (
+  <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
+)
+
+const p = ({ children }: { children: React.ReactNode }) => (
+  <p className="mb-4 text-base text-gray-700 dark:text-gray-400">{children}</p>
+)
+
+const blockquote = ({ children }: { children: React.ReactNode }) => (
+  <blockquote className="mb-8 text-base pl-4 border-l-4 border-gray-600">{children}</blockquote>
+)
+
+const table = ({ children }: { children: React.ReactNode }) => (
+  <div className="flex flex-col my-6">
+    <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div className="py-6 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+        <div className="shadow-lg overflow-hidden border-b border-gray-200 sm:rounded-lg dark:border-gray-700">
+          <table className="divide-y divide-gray-200 w-full dark:divide-gray-700">{children}</table>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+const a = ({
+  href,
+  target,
+  rel,
+  children,
+}: {
+  href: string
+  target?: string
+  rel?: string
+  children: React.ReactNode
+}) => {
+  const isAnchor = href.startsWith('https://')
+  target = isAnchor ? '_blank' : target
+  rel = isAnchor ? 'noopener noreferrer' : rel
+  href = isAnchor ? href : href.replace(MARKDOWN_REGEX, '')
+  return (
+    <a href={href} target={target} rel={rel}>
+      {children}
+    </a>
+  )
+}
+
+export const img = ({
+  src,
+  alt,
+  width,
+  height,
+  ...rest
+}: {
+  src: string
+  alt: string
+  width: number
+  height: number
+}) => (
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    src={src}
+    decoding="async"
+    loading="lazy"
+    alt={alt}
+    width={width}
+    height={height}
+    {...rest}
+  />
+)
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
index 9a881623..0b922e83 100644
--- a/src/utils/docs.tsx
+++ b/src/utils/docs.tsx
@@ -12,6 +12,8 @@ import rehypePrismPlus from 'rehype-prism-plus'
 import { codesandbox, toc } from '@/utils/rehype'
 import Codesandbox, { fetchCSB } from '@/components/Codesandbox'
 
+import * as components from '@/components/mdx'
+
 /**
  * Checks for .md(x) file extension
  */
@@ -52,114 +54,6 @@ async function crawl(dir: string, filter?: RegExp, files: string[] = []) {
  * @param root - absolute or relative (to cwd) path to docs folder
  */
 
-const components = {
-  Codesandbox,
-  Hint: ({ children }: { children: React.ReactNode }) => (
-    <div className="hint shadow overflow-hidden bg-yellow-100 border-b border-gray-200 sm:rounded-lg px-6 py-4 mb-6 dark:text-gray-500">
-      {children}
-    </div>
-  ),
-  Grid: ({ children, cols = 4 }: { children: React.ReactNode; cols?: number }) => (
-    <ul
-      className={`grid sm:grid-cols-2 ${
-        cols === 4
-          ? 'md:grid-cols-4'
-          : cols === 3
-          ? 'md:grid-cols-3'
-          : cols === 2
-          ? 'md:grid-cols-2'
-          : 'md:grid-cols-1'
-      } gap-4 text-sm text-gray-700 grid-list`}
-      style={{ marginBottom: '1rem' }}
-    >
-      {children}
-    </ul>
-  ),
-  h2: ({ children, id }: { children: React.ReactNode; id: string }) => (
-    <a href={`#${id}`} className="heading text-3xl mb-6 mt-8 tracking-light">
-      <h2 id={id}>{children}</h2>
-    </a>
-  ),
-  h3: ({ children, id }: { children: React.ReactNode; id: string }) => (
-    <a href={`#${id}`} className="heading text-xl mb-4 mt-6 tracking-light">
-      <h3 id={id}>{children}</h3>
-    </a>
-  ),
-  h4: ({ children, id }: { children: React.ReactNode; id: string }) => (
-    <a href={`#${id}`} className="heading text-base mb-4 mt-4 tracking-light">
-      <h4 id={id}>{children}</h4>
-    </a>
-  ),
-  ul: ({ children }: { children: React.ReactNode }) => <ul className="px-4 mb-8">{children}</ul>,
-  ol: ({ children }: { children: React.ReactNode }) => <ol className="px-4 mb-8">{children}</ol>,
-  li: ({ children }: { children: React.ReactNode }) => (
-    <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
-  ),
-  p: ({ children }: { children: React.ReactNode }) => (
-    <p className="mb-4 text-base text-gray-700 dark:text-gray-400">{children}</p>
-  ),
-  blockquote: ({ children }: { children: React.ReactNode }) => (
-    <blockquote className="mb-8 text-base pl-4 border-l-4 border-gray-600">{children}</blockquote>
-  ),
-  table: ({ children }: { children: React.ReactNode }) => (
-    <div className="flex flex-col my-6">
-      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div className="py-6 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          <div className="shadow-lg overflow-hidden border-b border-gray-200 sm:rounded-lg dark:border-gray-700">
-            <table className="divide-y divide-gray-200 w-full dark:divide-gray-700">
-              {children}
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  a: ({
-    href,
-    target,
-    rel,
-    children,
-  }: {
-    href: string
-    target?: string
-    rel?: string
-    children: React.ReactNode
-  }) => {
-    const isAnchor = href.startsWith('https://')
-    target = isAnchor ? '_blank' : target
-    rel = isAnchor ? 'noopener noreferrer' : rel
-    href = isAnchor ? href : href.replace(MARKDOWN_REGEX, '')
-    return (
-      <a href={href} target={target} rel={rel}>
-        {children}
-      </a>
-    )
-  },
-  img: ({
-    src,
-    alt,
-    width,
-    height,
-    ...rest
-  }: {
-    src: string
-    alt: string
-    width: number
-    height: number
-  }) => (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      decoding="async"
-      loading="lazy"
-      alt={alt}
-      width={width}
-      height={height}
-      {...rest}
-    />
-  ),
-}
-
 async function _getDocs(
   root: string,
   slugOfInterest: string[] | null,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 65090444..44b2db9f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,11 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
   darkMode: 'class',
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
   plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
 }
 export default config