From 0e3660ed34c5d097b78e2c050b8db9d02407070b Mon Sep 17 00:00:00 2001
From: Navin Moorthy <navin007.a@gmail.com>
Date: Tue, 19 Jul 2022 21:30:50 +0530
Subject: [PATCH] =?UTF-8?q?feat(codeblock):=20=E2=9C=A8=20add=20finished?=
 =?UTF-8?q?=20codeblock=20to=20mdx=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ClipBoardCopyButton.tsx            |  19 +-
 ...CodeButton.tsx => CopyCodeBlockButton.tsx} |   6 +-
 components/Codeblock/index.tsx                |  16 +-
 components/Codeblock/transformer.ts           |  15 +
 components/CopyButton.tsx                     |  25 ++
 components/InteractiveCodeblock.tsx           |   2 +-
 components/Pre.tsx                            |  15 +
 components/Tooltip.tsx                        |  16 +
 components/index.ts                           |   3 +
 package.json                                  |   3 +-
 pages/_app.tsx                                |   6 +-
 pages/docs/composition.mdx                    | 388 +++++++++++-------
 utils/index.ts                                |   1 +
 utils/mdxComponents.ts                        |   6 +
 yarn.lock                                     |  10 +-
 15 files changed, 351 insertions(+), 180 deletions(-)
 rename components/Codeblock/{CopyCodeButton.tsx => CopyCodeBlockButton.tsx} (58%)
 create mode 100644 components/Codeblock/transformer.ts
 create mode 100644 components/CopyButton.tsx
 create mode 100644 components/Pre.tsx
 create mode 100644 components/Tooltip.tsx
 create mode 100644 utils/mdxComponents.ts

diff --git a/components/ClipBoardCopyButton.tsx b/components/ClipBoardCopyButton.tsx
index 87bbead..01cdd5d 100644
--- a/components/ClipBoardCopyButton.tsx
+++ b/components/ClipBoardCopyButton.tsx
@@ -1,24 +1,25 @@
-import { Button } from "@adaptui/react-tailwind";
 import { useClipboard } from "@chakra-ui/hooks";
 
-import { CopiedIcon, CopyIcon } from "./Icons";
+import { CopyButton } from "./CopyButton";
+import { Tooltip, TooltipProps } from "./Tooltip";
 
-export type ClipboardCopyButtonProps = {
+export type ClipboardCopyButtonProps = TooltipProps & {
   content: string;
 };
 
 export const ClipboardCopyButton: React.FC<ClipboardCopyButtonProps> = ({
   content,
+  ...props
 }) => {
   const { hasCopied, onCopy } = useClipboard(content);
 
   return (
-    <Button
-      size="sm"
-      onClick={onCopy}
-      iconOnly={hasCopied ? <CopiedIcon /> : <CopyIcon />}
+    <Tooltip
+      withArrow
+      placement="left"
+      anchor={<CopyButton hasCopied={hasCopied} onCopy={onCopy} />}
+      content={hasCopied ? "Copied!" : "Copy"}
+      {...props}
     />
   );
 };
-
-export default ClipboardCopyButton;
diff --git a/components/Codeblock/CopyCodeButton.tsx b/components/Codeblock/CopyCodeBlockButton.tsx
similarity index 58%
rename from components/Codeblock/CopyCodeButton.tsx
rename to components/Codeblock/CopyCodeBlockButton.tsx
index 34c8211..80ad69d 100644
--- a/components/Codeblock/CopyCodeButton.tsx
+++ b/components/Codeblock/CopyCodeBlockButton.tsx
@@ -1,4 +1,4 @@
-import ClipboardCopyButton from "../ClipBoardCopyButton";
+import { ClipboardCopyButton } from "../ClipBoardCopyButton";
 
 export type CopyCodeBlockButtonProps = {
   code: string;
@@ -10,10 +10,8 @@ export const CopyCodeBlockButton: React.FC<
   const { code } = props;
 
   return (
-    <span className="absolute right-0 -top-2 -translate-x-2 translate-y-4 transform">
+    <span className="absolute right-2 top-2">
       <ClipboardCopyButton content={code} />
     </span>
   );
 };
-
-export default CopyCodeBlockButton;
diff --git a/components/Codeblock/index.tsx b/components/Codeblock/index.tsx
index 403a628..9feb166 100644
--- a/components/Codeblock/index.tsx
+++ b/components/Codeblock/index.tsx
@@ -7,18 +7,21 @@ import lightTheme from "prism-react-renderer/themes/vsLight";
 
 import { scope } from "../../utils";
 
-import CopyCodeBlockButton from "./CopyCodeButton";
+import { CopyCodeBlockButton } from "./CopyCodeBlockButton";
+import { transformer } from "./transformer";
 
 export type CodeblockProps = {
   code: string;
   noCopy?: boolean;
   noInline?: boolean;
+  children?: React.ReactNode | any;
 };
 
 export const Codeblock = (props: CodeblockProps) => {
-  const { code, noCopy, noInline, ...rest } = props;
+  const { code, noCopy, noInline, children, ...rest } = props;
+  const _code = children?.props?.children?.props?.children ?? code;
 
-  const [editorCode, setEditorCode] = React.useState(code.trim());
+  const [editorCode, setEditorCode] = React.useState(_code.trim());
   const handleChange = React.useCallback((code: string) => {
     setEditorCode(code.trim());
   }, []);
@@ -35,7 +38,10 @@ export const Codeblock = (props: CodeblockProps) => {
 
   return (
     <AdaptUIProvider>
-      <LiveProvider {...liveProviderProps}>
+      <LiveProvider
+        transformCode={rawCode => transformer(rawCode, noInline)}
+        {...liveProviderProps}
+      >
         <div className="mt-6 rounded-md border border-[#ededed] bg-transparent">
           <LivePreview className="rounded-t-md bg-white-900 p-6" />
           <div className="relative">
@@ -52,4 +58,4 @@ export const Codeblock = (props: CodeblockProps) => {
   );
 };
 
-export default Codeblock;
+export * from "./CopyCodeBlockButton";
diff --git a/components/Codeblock/transformer.ts b/components/Codeblock/transformer.ts
new file mode 100644
index 0000000..70945ce
--- /dev/null
+++ b/components/Codeblock/transformer.ts
@@ -0,0 +1,15 @@
+export const transformer = (rawCode: any, noInline: any) => {
+  const code = rawCode
+    // remove imports
+    .replace(/((^|)import[^;]+[; ]+)+/gi, "")
+    // replace `export default => {*};` with `render(() => {*});`
+    .replace(/export default \(\) => {((.|\n)*)};/, "render(() => {$1});")
+    // replace `export default => (*);` with `render(*);`
+    .replace(/export default \(\) => \(((.|\n)*)\);/, "render($1);")
+    // replace `export default => *;` with `render(*);`
+    .replace(/export default \(\) => ((.|\n)*);/, "render($1);")
+    .replace(/export const App = ((.|\n)*);/, "render($1);")
+    .replace(/export default ((.|\n)*);/, "render($1);");
+
+  return !noInline ? `<>${code}</>` : code;
+};
diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
new file mode 100644
index 0000000..a5fb18b
--- /dev/null
+++ b/components/CopyButton.tsx
@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import { Button, ButtonProps } from "@adaptui/react-tailwind";
+
+import { CopiedIcon, CopyIcon } from "./Icons";
+
+export type CopyButtonProps = ButtonProps & {
+  hasCopied: boolean;
+  onCopy: () => void;
+};
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (props, ref) => {
+    const { onCopy, hasCopied, ...rest } = props;
+
+    return (
+      <Button
+        ref={ref}
+        size="sm"
+        onClick={onCopy}
+        iconOnly={hasCopied ? <CopiedIcon /> : <CopyIcon />}
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/components/InteractiveCodeblock.tsx b/components/InteractiveCodeblock.tsx
index b492a09..79f2d93 100644
--- a/components/InteractiveCodeblock.tsx
+++ b/components/InteractiveCodeblock.tsx
@@ -17,7 +17,7 @@ import lightTheme from "prism-react-renderer/themes/vsLight";
 import { setup, tw } from "twind";
 import * as colors from "twind/colors";
 
-import CopyCodeBlockButton from "./Codeblock/CopyCodeButton";
+import { CopyCodeBlockButton } from "./Codeblock/CopyCodeBlockButton";
 
 setup({
   preflight: false, // do not include base style reset (default: use tailwind preflight)
diff --git a/components/Pre.tsx b/components/Pre.tsx
new file mode 100644
index 0000000..f75c44b
--- /dev/null
+++ b/components/Pre.tsx
@@ -0,0 +1,15 @@
+import { CopyCodeBlockButton } from "./Codeblock/CopyCodeBlockButton";
+
+export const Pre = (props: { children?: React.ReactNode }) => {
+  const { children, ...rest } = props;
+  console.log("%cprops", "color: #00ff88", props);
+
+  return (
+    <div className="relative">
+      <pre {...rest}>
+        <>{children}</>
+      </pre>
+      <CopyCodeBlockButton code={"copy"} />
+    </div>
+  );
+};
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
new file mode 100644
index 0000000..35c8169
--- /dev/null
+++ b/components/Tooltip.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import {
+  Tooltip as AdaptTooltip,
+  TooltipProps as AdaptTooltipProps,
+  TooltipWrapper,
+} from "@adaptui/react-tailwind";
+
+export type TooltipProps = AdaptTooltipProps & {};
+
+export const Tooltip: React.FC<TooltipProps> = props => {
+  return (
+    <AdaptTooltip {...props}>
+      <TooltipWrapper style={{ zIndex: 9999 }} />
+    </AdaptTooltip>
+  );
+};
diff --git a/components/index.ts b/components/index.ts
index 23f061a..54809db 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,5 +1,8 @@
+export * from "./ClipBoardCopyButton";
 export * from "./Codeblock";
 export * from "./ComponentLinks";
 export * from "./InteractiveCodeblock";
+export * from "./Pre";
 export * from "./PropsTable";
 export * from "./RegionTable";
+export * from "./Tooltip";
diff --git a/package.json b/package.json
index 25bd797..588a933 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@adaptui/react": "1.0.0-alpha.7",
-    "@adaptui/react-tailwind": "0.1.0-alpha.3",
+    "@adaptui/react-tailwind": "0.1.0-alpha.4",
     "@chakra-ui/hooks": "2.0.4",
     "@reach/skip-nav": "0.17.0",
     "ariakit": "2.0.0-next.34",
@@ -83,6 +83,7 @@
     "@babel/core": "7.18.9",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
+    "@mdx-js/react": "^2.1.2",
     "@next/eslint-plugin-next": "12.2.2",
     "@release-it/conventional-changelog": "5.0.0",
     "@testing-library/dom": "8.16.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index eb8c547..18abbaa 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { AdaptUIProvider } from "@adaptui/react-tailwind";
+import { MDXProvider } from "@mdx-js/react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
+import { mdxComponents } from "utils";
 
 import "@/styles/global.css";
 import "@/styles/nextra.css";
@@ -19,7 +21,9 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   return getLayout(
     <AdaptUIProvider>
-      <Component {...pageProps} />
+      <MDXProvider components={mdxComponents}>
+        <Component {...pageProps} />
+      </MDXProvider>
     </AdaptUIProvider>,
   );
 }
diff --git a/pages/docs/composition.mdx b/pages/docs/composition.mdx
index e548d5c..d7597f2 100644
--- a/pages/docs/composition.mdx
+++ b/pages/docs/composition.mdx
@@ -1,5 +1,3 @@
-import { Codeblock } from "@/components/index";
-
 # Composition
 
 Each and every atomic components in our library supports
@@ -16,7 +14,17 @@ Let's take the Checkbox component to explain the composition.
 
 ## Basic Usage
 
-<Codeblock live code={`<Checkbox size="md" defaultValue={true} />`} />
+<Codeblock live noInline>
+
+```
+import { Checkbox } from "@adaptui/react-tailwind";
+
+export const App = (props) => {
+  return <Checkbox size="md" defaultValue={true} {...props} />;
+};
+```
+
+</Codeblock>
 
 ## Simple Composition
 
@@ -25,64 +33,82 @@ childrens or as render prop.
 
 ### Without state as childrens
 
-<Codeblock
-  live
-  code={`
-<Checkbox
-  label="Checkbox"
-  description="Fruits in the basket"
->
-  <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
-  <CheckboxIcon className="bg-red-500" />
-  <CheckboxText className="text-green-500">New Checkbox</CheckboxText>
-  <CheckboxDescription className="text-orange-500">
-    New Description
-  </CheckboxDescription>
-</Checkbox>
-`}
-/>
+<Codeblock live noInline>
+
+```
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxIcon,
+  CheckboxText,
+  CheckboxDescription,
+} from "@adaptui/react-tailwind";
+
+export const App = props => {
+  return (
+    <Checkbox label="Checkbox" description="Fruits in the basket">
+      <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
+      <CheckboxIcon className="bg-red-500" />
+      <CheckboxText className="text-green-500">New Checkbox</CheckboxText>
+      <CheckboxDescription className="text-orange-500">
+        New Description
+      </CheckboxDescription>
+    </Checkbox>
+  );
+};
+```
+
+</Codeblock>
 
 ### With State as render prop
 
-<Codeblock
-  live
-  code={`
-<Checkbox label="Checkbox" description="Fruits in the basket">
-  {uiProps => {
-    return (
-      <>
-        <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
-        <CheckboxIcon
-          className={
-            uiProps.isChecked
-              ? "bg-red-500 peer-hover:bg-red-400"
-              : "bg-green-500 peer-hover:bg-green-400"
-          }
-        >
+<Codeblock live noInline>
+
+```
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxIcon,
+  CheckboxText,
+  CheckboxDescription,
+} from "@adaptui/react-tailwind";
+
+export const App = props => {
+  return (
+    <Checkbox label="Checkbox" description="Fruits in the basket">
+      {uiProps => {
+        return (
           <>
-            {uiProps.isUnchecked
-              ? withIconA11y(<EyeClose />, {}, {})
-              : null}
-            {uiProps.isChecked ? withIconA11y(<EyeOpen />, {}, {}) : null}
+            <CheckboxLabel className="rounded border-2 border-blue-500 p-2" />
+            <CheckboxIcon
+              className={
+                uiProps.isChecked
+                  ? "bg-red-500 peer-hover:bg-red-400"
+                  : "bg-green-500 peer-hover:bg-green-400"
+              }
+            >
+              <>
+                {uiProps.isUnchecked
+                  ? withIconA11y(<EyeClose />, {}, {})
+                  : null}
+                {uiProps.isChecked ? withIconA11y(<EyeOpen />, {}, {}) : null}
+              </>
+            </CheckboxIcon>
+            <CheckboxText className="text-green-500">
+              Overidden Label
+            </CheckboxText>
+            <CheckboxDescription className="text-orange-500">
+              Overridden Description
+            </CheckboxDescription>
           </>
-        </CheckboxIcon>
-        <CheckboxText className="text-green-500">
-          Overidden Label
-        </CheckboxText>
-        <CheckboxDescription className="text-orange-500">
-          Overridden Description
-        </CheckboxDescription>
-      </>
-    );
-  }}
-</Checkbox>
-`}
-/>
+        );
+      }}
+    </Checkbox>
+  );
+};
+```
 
-## Advanced Composition
-
-Only compose using the atomic components specific to its complex component
-separately with the help of `useComponentProps` & `useComponentState`.
+</Codeblock>
 
 ## Advanced Composition
 
@@ -94,112 +120,166 @@ separately with the help of `useComponentProps` & `useComponentState`.
 Basic usage that can be used to add additional DOM elements within these atomic
 components but cannot change the state or the libraries behavior.
 
-<Codeblock
-  live
-  noInline
-  code={`
-const Checkbox = React.forwardRef(
-  (props, ref) => {
-    const {
-      labelProps,
-      inputProps,
-      iconProps,
-      textWrapperProps,
-      textProps,
-      descriptionProps,
-      uiProps,
-    } = useCheckboxProps(props);
-    const { label, description, isChecked, isUnchecked } = uiProps;
-
-    return (
-      <CheckboxLabel className="p-2 border-2 border-blue-500 rounded" {...labelProps}>
-        <CheckboxInput ref={ref} {...inputProps} />
-        <CheckboxIcon
-          className={
-            isChecked
-              ? "bg-red-500 peer-hover:bg-red-400"
-              : "bg-green-500 peer-hover:bg-green-400"
-          }
-           {...iconProps}
-        >
-          <>
-            {isUnchecked ? withIconA11y(<EyeClose />) : null}
-            {isChecked ? withIconA11y(<EyeOpen />) : null}
-          </>
-        </CheckboxIcon>
-        <div>
-          <CheckboxText className="text-green-500" {...textProps}>
-            Label
-          </CheckboxText>
-          <CheckboxDescription className="text-orange-500" {...descriptionProps}>
-            Description
-          </CheckboxDescription>
-        </div>
-      </CheckboxLabel>
-    );
-
-}, );
+<Codeblock live noInline>
+
+```
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxIcon,
+  CheckboxText,
+  CheckboxDescription,
+} from "@adaptui/react-tailwind";
+
+export const App = props => {
+  const {
+    labelProps,
+    inputProps,
+    iconProps,
+    textWrapperProps,
+    textProps,
+    descriptionProps,
+    uiProps,
+  } = useCheckboxProps(props);
+  const { label, description, isChecked, isUnchecked } = uiProps;
+
+  return (
+    <CheckboxLabel
+      className="rounded border-2 border-blue-500 p-2"
+      {...labelProps}
+    >
+      <CheckboxInput {...inputProps} />
+      <CheckboxIcon
+        className={
+          isChecked
+            ? "bg-red-500 peer-hover:bg-red-400"
+            : "bg-green-500 peer-hover:bg-green-400"
+        }
+        {...iconProps}
+      >
+        <>
+          {isUnchecked ? withIconA11y(<EyeClose />) : null}
+          {isChecked ? withIconA11y(<EyeOpen />) : null}
+        </>
+      </CheckboxIcon>
+      <div>
+        <CheckboxText className="text-green-500" {...textProps}>
+          Label
+        </CheckboxText>
+        <CheckboxDescription className="text-orange-500" {...descriptionProps}>
+          Description
+        </CheckboxDescription>
+      </div>
+    </CheckboxLabel>
+  );
+};
+```
 
-render (<Checkbox />); `} />
+</Codeblock>
 
 ### Using `useComponentState`
 
 Advanced usage that uses the only the Component State to change the behavior of
 the component that is different from library logic.
 
-<Codeblock
-  live
-  noInline
-  code={`
-const Checkbox = () => {
-const state = Ariakit.useCheckboxState({ defaultValue: [] });
-
-return ( <> <CustomCheckbox inputValue="one" state={state}> Button one 😁
-
-</CustomCheckbox>
-<CustomCheckbox className="ml-2" inputValue="two" state={state}> Button two 🤓
-</CustomCheckbox>
-<CustomCheckbox className="ml-2" inputValue="three" state={state}> Button three
-👻 </CustomCheckbox> </> ); };
-
-const CustomCheckbox = props => {
-
-const { state, value, defaultValue, setValue, inputValue, size, icon, label,
-description, className, style, children, ...restProps } = props;
-
-const uiState = useCheckboxUIState({ state, inputValue, size, icon, label,
-description, });
-
-const uiProps = React.useMemo( () => ({ state, ...uiState }), [state, uiState],
-);
+<Codeblock live noInline>
 
-return (
+```
+import {
+  Checkbox,
+  CheckboxLabel,
+  CheckboxIcon,
+  CheckboxText,
+  CheckboxDescription,
+} from "@adaptui/react-tailwind";
+import * as Ariakit from "ariakit";
 
-<CheckboxLabel {...uiState} className={tcm("rounded border-2 border-blue-500 px-8 py-2", className)} >
-
-<CheckboxInput {...uiProps} {...restProps} value={inputValue} />
-
-{uiProps.isChecked ? (
-
-<CheckboxIcon className="absolute inset-y-0 left-0 flex items-center pl-1.5 text-blue-500">
-  <svg
-    className="h-5 w-5"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    aria-hidden="true"
-    role="img"
-    focusable={false}
-  >
-    <path
-      fillRule="evenodd"
-      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-      clipRule="evenodd"
-    />
-  </svg>
-</CheckboxIcon>
-) : null}
-
-<span className="select-none">{children}</span> </CheckboxLabel> ); };
+export const App = props => {
+  const CustomCheckbox = props => {
+    const {
+      state,
+      value,
+      defaultValue,
+      setValue,
+      inputValue,
+      size,
+      icon,
+      label,
+      description,
+      className,
+      style,
+      children,
+      ...restProps
+    } = props;
+
+    const uiState = useCheckboxUIState({
+      state,
+      inputValue,
+      size,
+      icon,
+      label,
+      description,
+    });
+
+    const uiProps = React.useMemo(
+      () => ({ state, ...uiState }),
+      [state, uiState],
+    );
 
-render (<Checkbox />); `} />
+    return (
+      <CheckboxLabel
+        {...uiState}
+        className={tcm("rounded border-2 border-blue-500 px-8 py-2", className)}
+      >
+        <CheckboxInput {...uiProps} {...restProps} value={inputValue} />
+        {uiProps.isChecked ? (
+          <CheckboxIcon className="absolute inset-y-0 left-0 flex items-center pl-1.5 text-blue-500">
+            <svg
+              className="h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              focusable={false}
+            >
+              <path
+                fillRule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </CheckboxIcon>
+        ) : null}
+        <span className="select-none">{children}</span>
+      </CheckboxLabel>
+    );
+  };
+
+  const state = Ariakit.useCheckboxState({ defaultValue: [] });
+
+  return (
+    <>
+      <CustomCheckbox className=" text-gray-800" inputValue="one" state={state}>
+        Button one 😁
+      </CustomCheckbox>
+      <CustomCheckbox
+        className="ml-2 text-gray-800"
+        inputValue="two"
+        state={state}
+      >
+        Button two 🤓
+      </CustomCheckbox>
+      <CustomCheckbox
+        className="ml-2 text-gray-800"
+        inputValue="three"
+        state={state}
+      >
+        Button three 👻
+      </CustomCheckbox>
+    </>
+  );
+};
+```
+
+</Codeblock>
diff --git a/utils/index.ts b/utils/index.ts
index 27794ef..625a318 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -1,2 +1,3 @@
 export * from "./colors";
+export * from "./mdxComponents";
 export * from "./reactLiveScope";
diff --git a/utils/mdxComponents.ts b/utils/mdxComponents.ts
new file mode 100644
index 0000000..f76c531
--- /dev/null
+++ b/utils/mdxComponents.ts
@@ -0,0 +1,6 @@
+import { Codeblock, Pre } from "../components";
+
+export const mdxComponents = {
+  pre: Pre,
+  Codeblock,
+};
diff --git a/yarn.lock b/yarn.lock
index 653fc6c..78b0d41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@adaptui/react-tailwind@0.1.0-alpha.3":
-  version "0.1.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@adaptui/react-tailwind/-/react-tailwind-0.1.0-alpha.3.tgz#59cf341ec772b6a5b782a1c7d11e9755d72d0da4"
-  integrity sha512-FftvOoUBcNeRRWNeEoVSgJ1fQKdQO2dSBeyoaU4x60JiQq6qbv++Agb+BbHHYJrlgjHAIr3l1Dc4cFPHvDXpRQ==
+"@adaptui/react-tailwind@0.1.0-alpha.4":
+  version "0.1.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@adaptui/react-tailwind/-/react-tailwind-0.1.0-alpha.4.tgz#e7fdb9a89896fa4deaf11f4adfc71bee18cf5af7"
+  integrity sha512-7X4GgEoVtll+Vbut6dahFoTZ6J+7XGcctnhgKMo4GMCOl8zhoU9j3HuW47EhvJ4jhjeVP7KcTrfSJ3zZoNHcIw==
   dependencies:
     "@adaptui/react" "^1.0.0-alpha.7"
     "@react-aria/live-announcer" "^3.1.0"
@@ -2029,7 +2029,7 @@
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-"@mdx-js/react@^2.1.0":
+"@mdx-js/react@^2.1.0", "@mdx-js/react@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.1.2.tgz#02972f170cd3ad9113ce448245c5f636bb3e750d"
   integrity sha512-52e3DTJBrjsw3U51ZCdZ3N1IBaqnbzLIngCSXpKtiYiGr7PIqp3/P/+kym0MPTwBL/y9ZBmCieD8FyrXuEDrRw==