diff --git a/apps/docs/content/components/link/block.raw.jsx b/apps/docs/content/components/link/block.raw.jsx
new file mode 100644
index 0000000000..d8f5a60f1c
--- /dev/null
+++ b/apps/docs/content/components/link/block.raw.jsx
@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Link isBlock showAnchorIcon color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link isBlock showAnchorIcon color="primary" href="#">
+        Primary
+      </Link>
+      <Link isBlock showAnchorIcon color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link isBlock showAnchorIcon color="success" href="#">
+        Success
+      </Link>
+      <Link isBlock showAnchorIcon color="warning" href="#">
+        Warning
+      </Link>
+      <Link isBlock showAnchorIcon color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts
index b7ee134ec8..7262af3b6d 100644
--- a/apps/docs/content/components/link/block.ts
+++ b/apps/docs/content/components/link/block.ts
@@ -1,29 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Link isBlock showAnchorIcon href="#" color="foreground">
-        Foreground
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="primary">
-        Primary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="secondary">
-        Secondary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="success">
-        Success
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="warning">
-        Warning
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="danger">
-        Danger
-      </Link>
-    </div>
-  );
-}`;
+import App from "./block.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/colors.raw.jsx b/apps/docs/content/components/link/colors.raw.jsx
new file mode 100644
index 0000000000..66192e6a92
--- /dev/null
+++ b/apps/docs/content/components/link/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link color="primary" href="#">
+        Primary
+      </Link>
+      <Link color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link color="success" href="#">
+        Success
+      </Link>
+      <Link color="warning" href="#">
+        Warning
+      </Link>
+      <Link color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/colors.ts b/apps/docs/content/components/link/colors.ts
index 99a84bf238..d5bef810aa 100644
--- a/apps/docs/content/components/link/colors.ts
+++ b/apps/docs/content/components/link/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" color="foreground">Foreground</Link>
-      <Link href="#" color="primary">Primary</Link>
-      <Link href="#" color="secondary">Secondary</Link>
-      <Link href="#" color="success">Success</Link>
-      <Link href="#" color="warning">Warning</Link>
-      <Link href="#" color="danger">Danger</Link>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/custom-anchor-icon.raw.jsx b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx
new file mode 100644
index 0000000000..38d57ba0bb
--- /dev/null
+++ b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx
@@ -0,0 +1,35 @@
+import {Link} from "@nextui-org/react";
+
+export const AnchorIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="24"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="24"
+    {...props}
+  >
+    <path
+      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+      fill="currentColor"
+    />
+    <path
+      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default function App() {
+  return (
+    <Link
+      isExternal
+      showAnchorIcon
+      anchorIcon={<AnchorIcon />}
+      href="https://github.com/nextui-org/nextui"
+    >
+      Custom Icon
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/custom-anchor-icon.ts b/apps/docs/content/components/link/custom-anchor-icon.ts
index ca70aee5a7..6d105abc2e 100644
--- a/apps/docs/content/components/link/custom-anchor-icon.ts
+++ b/apps/docs/content/components/link/custom-anchor-icon.ts
@@ -1,43 +1,7 @@
-const AnchorIcon = `export const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Link} from "@nextui-org/react";
-import {AnchorIcon} from "./AnchorIcon";
-
-export default function App() {
-  return (
-    <Link
-      isExternal
-      showAnchorIcon
-      href="https://github.com/nextui-org/nextui"
-      anchorIcon={<AnchorIcon />}
-    >
-      Custom Icon
-    </Link>
-  );
-}`;
+import App from "./custom-anchor-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AnchorIcon.jsx": AnchorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/link/custom-impl.raw.jsx b/apps/docs/content/components/link/custom-impl.raw.jsx
new file mode 100644
index 0000000000..bfadf4d60d
--- /dev/null
+++ b/apps/docs/content/components/link/custom-impl.raw.jsx
@@ -0,0 +1,30 @@
+import {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {useLink} from "@nextui-org/react";
+
+const MyLink = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;
diff --git a/apps/docs/content/components/link/custom-impl.raw.tsx b/apps/docs/content/components/link/custom-impl.raw.tsx
new file mode 100644
index 0000000000..c4cd0ba569
--- /dev/null
+++ b/apps/docs/content/components/link/custom-impl.raw.tsx
@@ -0,0 +1,32 @@
+import React, {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {LinkProps, useLink} from "@nextui-org/react";
+
+export interface MyLinkProps extends LinkProps {}
+
+const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;
diff --git a/apps/docs/content/components/link/custom-impl.ts b/apps/docs/content/components/link/custom-impl.ts
index 9c1a72017d..ef0d8ef531 100644
--- a/apps/docs/content/components/link/custom-impl.ts
+++ b/apps/docs/content/components/link/custom-impl.ts
@@ -1,68 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {useLink} from "@nextui-org/react";
-
-const MyLink = forwardRef((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
-
-const AppTs = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {LinkProps, useLink} from "@nextui-org/react";
-
-export interface MyLinkProps extends LinkProps {}
-
-const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/disabled.raw.jsx b/apps/docs/content/components/link/disabled.raw.jsx
new file mode 100644
index 0000000000..28ab3b52b3
--- /dev/null
+++ b/apps/docs/content/components/link/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Link isDisabled href="#">
+      Disabled Link
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/disabled.ts b/apps/docs/content/components/link/disabled.ts
index a4db371fba..1a215cc91f 100644
--- a/apps/docs/content/components/link/disabled.ts
+++ b/apps/docs/content/components/link/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Link href="#" isDisabled>Disabled Link</Link>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/external.raw.jsx b/apps/docs/content/components/link/external.raw.jsx
new file mode 100644
index 0000000000..63d17130ca
--- /dev/null
+++ b/apps/docs/content/components/link/external.raw.jsx
@@ -0,0 +1,14 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link isExternal href="https://github.com/nextui-org/nextui">
+        External Link
+      </Link>
+      <Link isExternal showAnchorIcon href="https://github.com/nextui-org/nextui">
+        External Link Anchor
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/external.ts b/apps/docs/content/components/link/external.ts
index b59e78c177..ad0973aa0f 100644
--- a/apps/docs/content/components/link/external.ts
+++ b/apps/docs/content/components/link/external.ts
@@ -1,21 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link isExternal href="https://github.com/nextui-org/nextui">
-        External Link
-      </Link>
-      <Link
-        isExternal
-        href="https://github.com/nextui-org/nextui"
-        showAnchorIcon
-      >
-        External Link Anchor
-      </Link>
-    </div>
-  );
-}`;
+import App from "./external.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/nextjs.raw.jsx b/apps/docs/content/components/link/nextjs.raw.jsx
new file mode 100644
index 0000000000..38e7674e6a
--- /dev/null
+++ b/apps/docs/content/components/link/nextjs.raw.jsx
@@ -0,0 +1,10 @@
+import {Link} from "@nextui-org/react";
+import NextLink from "next/link";
+
+export default function App() {
+  return (
+    <Link as={NextLink} href="/route">
+      Next.js Link
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/nextjs.ts b/apps/docs/content/components/link/nextjs.ts
index 77f0e808a9..1d69196630 100644
--- a/apps/docs/content/components/link/nextjs.ts
+++ b/apps/docs/content/components/link/nextjs.ts
@@ -1,13 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-import NextLink from "next/link";
-
-export default function App() {
-  return (
-    <Link href="/route" as={NextLink}>
-      Next.js Link
-    </Link>
-  );
-}`;
+import App from "./nextjs.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/polymorphic.raw.jsx b/apps/docs/content/components/link/polymorphic.raw.jsx
new file mode 100644
index 0000000000..52e8f3bd83
--- /dev/null
+++ b/apps/docs/content/components/link/polymorphic.raw.jsx
@@ -0,0 +1,15 @@
+import {Link, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      showAnchorIcon
+      as={Link}
+      color="primary"
+      href="https://github.com/nextui-org/nextui"
+      variant="solid"
+    >
+      Button Link
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/link/polymorphic.ts b/apps/docs/content/components/link/polymorphic.ts
index 10c04b327b..5722a6ee48 100644
--- a/apps/docs/content/components/link/polymorphic.ts
+++ b/apps/docs/content/components/link/polymorphic.ts
@@ -1,18 +1,4 @@
-const App = `import { Link, Button } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button
-      href="https://github.com/nextui-org/nextui"
-      as={Link}
-      color="primary"
-      showAnchorIcon
-      variant="solid"
-    >
-      Button Link
-    </Button>
-  );
-}`;
+import App from "./polymorphic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/sizes.raw.jsx b/apps/docs/content/components/link/sizes.raw.jsx
new file mode 100644
index 0000000000..2230bd9113
--- /dev/null
+++ b/apps/docs/content/components/link/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" size="sm">
+        Small
+      </Link>
+      <Link href="#" size="md">
+        Medium
+      </Link>
+      <Link href="#" size="lg">
+        Large
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/sizes.ts b/apps/docs/content/components/link/sizes.ts
index 63df519edc..85a2f5b30b 100644
--- a/apps/docs/content/components/link/sizes.ts
+++ b/apps/docs/content/components/link/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" size="sm">Small</Link>
-      <Link href="#" size="md">Medium</Link>
-      <Link href="#" size="lg">Large</Link>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/underline.raw.jsx b/apps/docs/content/components/link/underline.raw.jsx
new file mode 100644
index 0000000000..456a63929c
--- /dev/null
+++ b/apps/docs/content/components/link/underline.raw.jsx
@@ -0,0 +1,23 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" underline="none">
+        None
+      </Link>
+      <Link href="#" underline="hover">
+        Hover
+      </Link>
+      <Link href="#" underline="always">
+        Always
+      </Link>
+      <Link href="#" underline="active">
+        Active
+      </Link>
+      <Link href="#" underline="focus">
+        Focus
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/underline.ts b/apps/docs/content/components/link/underline.ts
index 78e0d7b87e..0d7eb45ee3 100644
--- a/apps/docs/content/components/link/underline.ts
+++ b/apps/docs/content/components/link/underline.ts
@@ -1,16 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" underline="none">None</Link>
-      <Link href="#" underline="hover">Hover</Link>
-      <Link href="#" underline="always">Always</Link>
-      <Link href="#" underline="active">Active</Link>
-      <Link href="#" underline="focus">Focus</Link>
-    </div>  
-  );
-}`;
+import App from "./underline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/usage.raw.jsx b/apps/docs/content/components/link/usage.raw.jsx
new file mode 100644
index 0000000000..4418696de5
--- /dev/null
+++ b/apps/docs/content/components/link/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return <Link href="#">Default Link</Link>;
+}
diff --git a/apps/docs/content/components/link/usage.ts b/apps/docs/content/components/link/usage.ts
index bcd07ac923..1118304c37 100644
--- a/apps/docs/content/components/link/usage.ts
+++ b/apps/docs/content/components/link/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Link href="#">Default Link</Link>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,