diff --git a/apps/docs/content/components/code/colors.raw.jsx b/apps/docs/content/components/code/colors.raw.jsx
new file mode 100644
index 0000000000..f80c81779f
--- /dev/null
+++ b/apps/docs/content/components/code/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Code color="default">npm install @nextui-org/react</Code>
+      <Code color="primary">npm install @nextui-org/react</Code>
+      <Code color="secondary">npm install @nextui-org/react</Code>
+      <Code color="success">npm install @nextui-org/react</Code>
+      <Code color="warning">npm install @nextui-org/react</Code>
+      <Code color="danger">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts
index 7c2641f200..d5bef810aa 100644
--- a/apps/docs/content/components/code/colors.ts
+++ b/apps/docs/content/components/code/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Code color="default">npm install @nextui-org/react</Code>
-      <Code color="primary">npm install @nextui-org/react</Code>
-      <Code color="secondary">npm install @nextui-org/react</Code>
-      <Code color="success">npm install @nextui-org/react</Code>
-      <Code color="warning">npm install @nextui-org/react</Code>
-      <Code color="danger">npm install @nextui-org/react</Code>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/code/sizes.raw.jsx b/apps/docs/content/components/code/sizes.raw.jsx
new file mode 100644
index 0000000000..51a27c7dee
--- /dev/null
+++ b/apps/docs/content/components/code/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Code size="sm">npm install @nextui-org/react</Code>
+      <Code size="md">npm install @nextui-org/react</Code>
+      <Code size="lg">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts
index 9d13253761..85a2f5b30b 100644
--- a/apps/docs/content/components/code/sizes.ts
+++ b/apps/docs/content/components/code/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4">
-      <Code size="sm">npm install @nextui-org/react</Code>
-      <Code size="md">npm install @nextui-org/react</Code>
-      <Code size="lg">npm install @nextui-org/react</Code>
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/code/usage.raw.jsx b/apps/docs/content/components/code/usage.raw.jsx
new file mode 100644
index 0000000000..d2adf43cb4
--- /dev/null
+++ b/apps/docs/content/components/code/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return <Code>npm install @nextui-org/react</Code>;
+}
diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts
index b5a5a2895b..1118304c37 100644
--- a/apps/docs/content/components/code/usage.ts
+++ b/apps/docs/content/components/code/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Code>npm install @nextui-org/react</Code>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,