diff --git a/apps/docs/content/components/image/blurred.raw.jsx b/apps/docs/content/components/image/blurred.raw.jsx
new file mode 100644
index 0000000000..c1bcc75e14
--- /dev/null
+++ b/apps/docs/content/components/image/blurred.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isBlurred
+      alt="NextUI Album Cover"
+      className="m-5"
+      src="https://nextui.org/images/album-cover.png"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/blurred.ts b/apps/docs/content/components/image/blurred.ts
index 379e433c7a..0c08e28f90 100644
--- a/apps/docs/content/components/image/blurred.ts
+++ b/apps/docs/content/components/image/blurred.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isBlurred
-      width={240}
-      src="https://nextui.org/images/album-cover.png"
-      alt="NextUI Album Cover"
-      className="m-5"
-    />
-  );
-}`;
+import App from "./blurred.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/fallback.raw.jsx b/apps/docs/content/components/image/fallback.raw.jsx
new file mode 100644
index 0000000000..dba0cca441
--- /dev/null
+++ b/apps/docs/content/components/image/fallback.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI Image with fallback"
+      fallbackSrc="https://via.placeholder.com/300x200"
+      height={200}
+      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/fallback.ts b/apps/docs/content/components/image/fallback.ts
index 165089d80a..20854071f7 100644
--- a/apps/docs/content/components/image/fallback.ts
+++ b/apps/docs/content/components/image/fallback.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
-      fallbackSrc="https://via.placeholder.com/300x200"
-      alt="NextUI Image with fallback"
-    />
-  );
-}`;
+import App from "./fallback.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/loading.raw.jsx b/apps/docs/content/components/image/loading.raw.jsx
new file mode 100644
index 0000000000..3ad1b17619
--- /dev/null
+++ b/apps/docs/content/components/image/loading.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image with delay"
+      height={200}
+      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/loading.ts b/apps/docs/content/components/image/loading.ts
index e2d70af02f..0c8fea5a5f 100644
--- a/apps/docs/content/components/image/loading.ts
+++ b/apps/docs/content/components/image/loading.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      alt="NextUI hero Image with delay"
-      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./loading.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/nextjs.raw.jsx b/apps/docs/content/components/image/nextjs.raw.jsx
new file mode 100644
index 0000000000..deee4e2121
--- /dev/null
+++ b/apps/docs/content/components/image/nextjs.raw.jsx
@@ -0,0 +1,14 @@
+import {Image} from "@nextui-org/react";
+import NextImage from "next/image";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      as={NextImage}
+      height={200}
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/nextjs.ts b/apps/docs/content/components/image/nextjs.ts
index ff6a18e14e..1d69196630 100644
--- a/apps/docs/content/components/image/nextjs.ts
+++ b/apps/docs/content/components/image/nextjs.ts
@@ -1,17 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-import NextImage from "next/image";
-
-export default function App() {
-  return (
-    <Image
-      as={NextImage}
-      width={300}
-      height={200}
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-      alt="NextUI hero Image"
-    />
-  );
-}`;
+import App from "./nextjs.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/usage.raw.jsx b/apps/docs/content/components/image/usage.raw.jsx
new file mode 100644
index 0000000000..f7be019c8d
--- /dev/null
+++ b/apps/docs/content/components/image/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/usage.ts b/apps/docs/content/components/image/usage.ts
index 7041554fed..1118304c37 100644
--- a/apps/docs/content/components/image/usage.ts
+++ b/apps/docs/content/components/image/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      alt="NextUI hero Image"
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/zoomed.raw.jsx b/apps/docs/content/components/image/zoomed.raw.jsx
new file mode 100644
index 0000000000..8e05d6217b
--- /dev/null
+++ b/apps/docs/content/components/image/zoomed.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isZoomed
+      alt="NextUI Fruit Image with Zoom"
+      src="https://nextui.org/images/fruit-1.jpeg"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/zoomed.ts b/apps/docs/content/components/image/zoomed.ts
index 2aaa13b28f..19b1fbb781 100644
--- a/apps/docs/content/components/image/zoomed.ts
+++ b/apps/docs/content/components/image/zoomed.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isZoomed
-      width={240}
-      alt="NextUI Fruit Image with Zoom"
-      src="https://nextui.org/images/fruit-1.jpeg"
-    />
-  );
-}`;
+import App from "./zoomed.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,