diff --git a/apps/docs/content/components/spinner/colors.raw.jsx b/apps/docs/content/components/spinner/colors.raw.jsx
new file mode 100644
index 0000000000..61dd419d98
--- /dev/null
+++ b/apps/docs/content/components/spinner/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner color="default" />
+      <Spinner color="primary" />
+      <Spinner color="secondary" />
+      <Spinner color="success" />
+      <Spinner color="warning" />
+      <Spinner color="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/colors.ts b/apps/docs/content/components/spinner/colors.ts
index 33b27d5392..d5bef810aa 100644
--- a/apps/docs/content/components/spinner/colors.ts
+++ b/apps/docs/content/components/spinner/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner color="default"/>
-      <Spinner color="primary"/>
-      <Spinner color="secondary"/>
-      <Spinner color="success"/>
-      <Spinner color="warning"/>
-      <Spinner color="danger"/>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/label-colors.raw.jsx b/apps/docs/content/components/spinner/label-colors.raw.jsx
new file mode 100644
index 0000000000..706793018b
--- /dev/null
+++ b/apps/docs/content/components/spinner/label-colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner color="default" label="Default" labelColor="foreground" />
+      <Spinner color="primary" label="Primary" labelColor="primary" />
+      <Spinner color="secondary" label="Secondary" labelColor="secondary" />
+      <Spinner color="success" label="Success" labelColor="success" />
+      <Spinner color="warning" label="Warning" labelColor="warning" />
+      <Spinner color="danger" label="Danger" labelColor="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/label-colors.ts b/apps/docs/content/components/spinner/label-colors.ts
index acd289fea0..38384cdf03 100644
--- a/apps/docs/content/components/spinner/label-colors.ts
+++ b/apps/docs/content/components/spinner/label-colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner label="Default" color="default" labelColor="foreground"/>
-      <Spinner label="Primary" color="primary" labelColor="primary"/>
-      <Spinner label="Secondary" color="secondary" labelColor="secondary"/>
-      <Spinner label="Success" color="success" labelColor="success"/>
-      <Spinner label="Warning" color="warning" labelColor="warning"/>
-      <Spinner label="Danger" color="danger" labelColor="danger"/>
-    </div> 
-  );
-}`;
+import App from "./label-colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/label.raw.jsx b/apps/docs/content/components/spinner/label.raw.jsx
new file mode 100644
index 0000000000..d7f29abfa6
--- /dev/null
+++ b/apps/docs/content/components/spinner/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return <Spinner color="warning" label="Loading..." />;
+}
diff --git a/apps/docs/content/components/spinner/label.ts b/apps/docs/content/components/spinner/label.ts
index 3e08afd962..254b95afb8 100644
--- a/apps/docs/content/components/spinner/label.ts
+++ b/apps/docs/content/components/spinner/label.ts
@@ -1,10 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Spinner label="Loading..." color="warning" />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/sizes.raw.jsx b/apps/docs/content/components/spinner/sizes.raw.jsx
new file mode 100644
index 0000000000..7e740a9dd3
--- /dev/null
+++ b/apps/docs/content/components/spinner/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/sizes.ts b/apps/docs/content/components/spinner/sizes.ts
index 29c59b2d3a..85a2f5b30b 100644
--- a/apps/docs/content/components/spinner/sizes.ts
+++ b/apps/docs/content/components/spinner/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner size="sm" />
-      <Spinner size="md" />
-      <Spinner size="lg" />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/usage.raw.jsx b/apps/docs/content/components/spinner/usage.raw.jsx
new file mode 100644
index 0000000000..0e516c76c9
--- /dev/null
+++ b/apps/docs/content/components/spinner/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return <Spinner />;
+}
diff --git a/apps/docs/content/components/spinner/usage.ts b/apps/docs/content/components/spinner/usage.ts
index c61327f31c..1118304c37 100644
--- a/apps/docs/content/components/spinner/usage.ts
+++ b/apps/docs/content/components/spinner/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Spinner />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,