diff --git a/apps/docs/content/components/progress/colors.raw.jsx b/apps/docs/content/components/progress/colors.raw.jsx
new file mode 100644
index 0000000000..fe106ebe2b
--- /dev/null
+++ b/apps/docs/content/components/progress/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Progress aria-label="Loading..." color="default" value={70} />
+      <Progress aria-label="Loading..." color="primary" value={70} />
+      <Progress aria-label="Loading..." color="secondary" value={70} />
+      <Progress aria-label="Loading..." color="success" value={70} />
+      <Progress aria-label="Loading..." color="warning" value={70} />
+      <Progress aria-label="Loading..." color="danger" value={70} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/progress/colors.ts b/apps/docs/content/components/progress/colors.ts
index 50c389a595..d5bef810aa 100644
--- a/apps/docs/content/components/progress/colors.ts
+++ b/apps/docs/content/components/progress/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Progress color="default" aria-label="Loading..." value={70} />
-      <Progress color="primary" aria-label="Loading..." value={70} />
-      <Progress color="secondary" aria-label="Loading..." value={70} />
-      <Progress color="success" aria-label="Loading..." value={70} />
-      <Progress color="warning" aria-label="Loading..." value={70} />
-      <Progress color="danger" aria-label="Loading..." value={70} />
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/custom-styles.raw.jsx b/apps/docs/content/components/progress/custom-styles.raw.jsx
new file mode 100644
index 0000000000..e1ded1a4b1
--- /dev/null
+++ b/apps/docs/content/components/progress/custom-styles.raw.jsx
@@ -0,0 +1,20 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress
+      classNames={{
+        base: "max-w-md",
+        track: "drop-shadow-md border border-default",
+        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
+        label: "tracking-wider font-medium text-default-600",
+        value: "text-foreground/60",
+      }}
+      label="Lose weight"
+      radius="sm"
+      showValueLabel={true}
+      size="sm"
+      value={65}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/custom-styles.ts b/apps/docs/content/components/progress/custom-styles.ts
index 84f5061b1c..da3ea9093a 100644
--- a/apps/docs/content/components/progress/custom-styles.ts
+++ b/apps/docs/content/components/progress/custom-styles.ts
@@ -1,23 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      size="sm"
-      radius="sm"
-      classNames={{
-        base: "max-w-md",
-        track: "drop-shadow-md border border-default",
-        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
-        label: "tracking-wider font-medium text-default-600",
-        value: "text-foreground/60",
-      }}
-      label="Lose weight"
-      value={65}
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/indeterminate.raw.jsx b/apps/docs/content/components/progress/indeterminate.raw.jsx
new file mode 100644
index 0000000000..df0f7bd1e1
--- /dev/null
+++ b/apps/docs/content/components/progress/indeterminate.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress isIndeterminate aria-label="Loading..." className="max-w-md" size="sm" />;
+}
diff --git a/apps/docs/content/components/progress/indeterminate.ts b/apps/docs/content/components/progress/indeterminate.ts
index ea51f815f9..7094e42950 100644
--- a/apps/docs/content/components/progress/indeterminate.ts
+++ b/apps/docs/content/components/progress/indeterminate.ts
@@ -1,15 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      size="sm"
-      isIndeterminate
-      aria-label="Loading..."
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./indeterminate.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/label.raw.jsx b/apps/docs/content/components/progress/label.raw.jsx
new file mode 100644
index 0000000000..f623f9081f
--- /dev/null
+++ b/apps/docs/content/components/progress/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress className="max-w-md" label="Loading..." value={55} />;
+}
diff --git a/apps/docs/content/components/progress/label.ts b/apps/docs/content/components/progress/label.ts
index ec0021c73f..254b95afb8 100644
--- a/apps/docs/content/components/progress/label.ts
+++ b/apps/docs/content/components/progress/label.ts
@@ -1,10 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress label="Loading..." value={55}  className="max-w-md" />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/sizes.raw.jsx b/apps/docs/content/components/progress/sizes.raw.jsx
new file mode 100644
index 0000000000..dae25bd97b
--- /dev/null
+++ b/apps/docs/content/components/progress/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Progress aria-label="Loading..." size="sm" value={30} />
+      <Progress aria-label="Loading..." size="md" value={40} />
+      <Progress aria-label="Loading..." size="lg" value={50} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/progress/sizes.ts b/apps/docs/content/components/progress/sizes.ts
index a521327385..85a2f5b30b 100644
--- a/apps/docs/content/components/progress/sizes.ts
+++ b/apps/docs/content/components/progress/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Progress size="sm" aria-label="Loading..." value={30} />
-      <Progress size="md" aria-label="Loading..." value={40} />
-      <Progress size="lg" aria-label="Loading..." value={50} />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/striped.raw.jsx b/apps/docs/content/components/progress/striped.raw.jsx
new file mode 100644
index 0000000000..f8c21c29e4
--- /dev/null
+++ b/apps/docs/content/components/progress/striped.raw.jsx
@@ -0,0 +1,7 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress isStriped aria-label="Loading..." className="max-w-md" color="secondary" value={60} />
+  );
+}
diff --git a/apps/docs/content/components/progress/striped.ts b/apps/docs/content/components/progress/striped.ts
index b5f348fb4e..efcbdde82e 100644
--- a/apps/docs/content/components/progress/striped.ts
+++ b/apps/docs/content/components/progress/striped.ts
@@ -1,17 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      isStriped
-      aria-label="Loading..."
-      color="secondary"
-      value={60}
-      className="max-w-md"
-    />
-  );
-}
-`;
+import App from "./striped.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/usage.raw.jsx b/apps/docs/content/components/progress/usage.raw.jsx
new file mode 100644
index 0000000000..d1e31aff49
--- /dev/null
+++ b/apps/docs/content/components/progress/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress aria-label="Loading..." className="max-w-md" value={60} />;
+}
diff --git a/apps/docs/content/components/progress/usage.ts b/apps/docs/content/components/progress/usage.ts
index 61bc662eb4..1118304c37 100644
--- a/apps/docs/content/components/progress/usage.ts
+++ b/apps/docs/content/components/progress/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress aria-label="Loading..." value={60} className="max-w-md"/>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/value-formatting.raw.jsx b/apps/docs/content/components/progress/value-formatting.raw.jsx
new file mode 100644
index 0000000000..f6defdafcd
--- /dev/null
+++ b/apps/docs/content/components/progress/value-formatting.raw.jsx
@@ -0,0 +1,16 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress
+      className="max-w-md"
+      color="warning"
+      formatOptions={{style: "currency", currency: "ARS"}}
+      label="Monthly expenses"
+      maxValue={10000}
+      showValueLabel={true}
+      size="sm"
+      value={4000}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/value-formatting.ts b/apps/docs/content/components/progress/value-formatting.ts
index d31dc42a99..0cd558d45d 100644
--- a/apps/docs/content/components/progress/value-formatting.ts
+++ b/apps/docs/content/components/progress/value-formatting.ts
@@ -1,19 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      label="Monthly expenses"
-      size="sm"
-      value={4000}
-      maxValue={10000}
-      color="warning"
-      formatOptions={{style: "currency", currency: "ARS"}}
-      showValueLabel={true}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/value.raw.jsx b/apps/docs/content/components/progress/value.raw.jsx
new file mode 100644
index 0000000000..2700ccda53
--- /dev/null
+++ b/apps/docs/content/components/progress/value.raw.jsx
@@ -0,0 +1,24 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((v) => (v >= 100 ? 0 : v + 10));
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Progress
+      aria-label="Downloading..."
+      className="max-w-md"
+      color="success"
+      showValueLabel={true}
+      size="md"
+      value={value}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/value.ts b/apps/docs/content/components/progress/value.ts
index 8b87769cbf..e2de0e9024 100644
--- a/apps/docs/content/components/progress/value.ts
+++ b/apps/docs/content/components/progress/value.ts
@@ -1,27 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(0);
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setValue((v) => (v >= 100 ? 0 : v + 10));
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Progress
-      aria-label="Downloading..."
-      size="md"
-      value={value}
-      color="success"
-      showValueLabel={true}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,