diff --git a/apps/docs/content/components/circular-progress/colors.raw.jsx b/apps/docs/content/components/circular-progress/colors.raw.jsx
new file mode 100644
index 0000000000..09e7cc6aa1
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress aria-label="Loading..." color="default" />
+      <CircularProgress aria-label="Loading..." color="primary" />
+      <CircularProgress aria-label="Loading..." color="secondary" />
+      <CircularProgress aria-label="Loading..." color="success" />
+      <CircularProgress aria-label="Loading..." color="warning" />
+      <CircularProgress aria-label="Loading..." color="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/colors.ts b/apps/docs/content/components/circular-progress/colors.ts
index 2a8fff62a5..d5bef810aa 100644
--- a/apps/docs/content/components/circular-progress/colors.ts
+++ b/apps/docs/content/components/circular-progress/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <CircularProgress color="default" aria-label="Loading..."/>
-      <CircularProgress color="primary" aria-label="Loading..."/>
-      <CircularProgress color="secondary" aria-label="Loading..."/>
-      <CircularProgress color="success" aria-label="Loading..."/>
-      <CircularProgress color="warning" aria-label="Loading..."/>
-      <CircularProgress color="danger" aria-label="Loading..."/>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
new file mode 100644
index 0000000000..8e2f2d9e64
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
@@ -0,0 +1,32 @@
+import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
+      <CardBody className="justify-center items-center pb-0">
+        <CircularProgress
+          classNames={{
+            svg: "w-36 h-36 drop-shadow-md",
+            indicator: "stroke-white",
+            track: "stroke-white/10",
+            value: "text-3xl font-semibold text-white",
+          }}
+          showValueLabel={true}
+          strokeWidth={4}
+          value={70}
+        />
+      </CardBody>
+      <CardFooter className="justify-center items-center pt-0">
+        <Chip
+          classNames={{
+            base: "border-1 border-white/30",
+            content: "text-white/90 text-small font-semibold",
+          }}
+          variant="bordered"
+        >
+          2800 Data points
+        </Chip>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/custom-styles.ts b/apps/docs/content/components/circular-progress/custom-styles.ts
index 53b74c16c2..da3ea9093a 100644
--- a/apps/docs/content/components/circular-progress/custom-styles.ts
+++ b/apps/docs/content/components/circular-progress/custom-styles.ts
@@ -1,35 +1,4 @@
-const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
-      <CardBody className="justify-center items-center pb-0">
-        <CircularProgress
-          classNames={{
-            svg: "w-36 h-36 drop-shadow-md",
-            indicator: "stroke-white",
-            track: "stroke-white/10",
-            value: "text-3xl font-semibold text-white",
-          }}
-          value={70}
-          strokeWidth={4}
-          showValueLabel={true}
-        />
-      </CardBody>
-      <CardFooter className="justify-center items-center pt-0">
-        <Chip
-          classNames={{
-            base: "border-1 border-white/30",
-            content: "text-white/90 text-small font-semibold",
-          }}
-          variant="bordered"
-        >
-          2800 Data points
-        </Chip>
-      </CardFooter>
-    </Card>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/label.raw.jsx b/apps/docs/content/components/circular-progress/label.raw.jsx
new file mode 100644
index 0000000000..7767e1e4f8
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/label.raw.jsx
@@ -0,0 +1,5 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return <CircularProgress label="Loading..." />;
+}
diff --git a/apps/docs/content/components/circular-progress/label.ts b/apps/docs/content/components/circular-progress/label.ts
index e9bd60e770..254b95afb8 100644
--- a/apps/docs/content/components/circular-progress/label.ts
+++ b/apps/docs/content/components/circular-progress/label.ts
@@ -1,10 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress label="Loading..." />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/sizes.raw.jsx b/apps/docs/content/components/circular-progress/sizes.raw.jsx
new file mode 100644
index 0000000000..cdf5cdb24f
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress aria-label="Loading..." size="sm" />
+      <CircularProgress aria-label="Loading..." size="md" />
+      <CircularProgress aria-label="Loading..." size="lg" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/sizes.ts b/apps/docs/content/components/circular-progress/sizes.ts
index ef5050c7a3..85a2f5b30b 100644
--- a/apps/docs/content/components/circular-progress/sizes.ts
+++ b/apps/docs/content/components/circular-progress/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <CircularProgress size="sm" aria-label="Loading..."/>
-      <CircularProgress size="md" aria-label="Loading..."/>
-      <CircularProgress size="lg" aria-label="Loading..."/>
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/usage.raw.jsx b/apps/docs/content/components/circular-progress/usage.raw.jsx
new file mode 100644
index 0000000000..fb6ac8e2ac
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return <CircularProgress aria-label="Loading..." />;
+}
diff --git a/apps/docs/content/components/circular-progress/usage.ts b/apps/docs/content/components/circular-progress/usage.ts
index ab4db2bbda..1118304c37 100644
--- a/apps/docs/content/components/circular-progress/usage.ts
+++ b/apps/docs/content/components/circular-progress/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress aria-label="Loading..." />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/value-formatting.raw.jsx b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx
new file mode 100644
index 0000000000..81112502da
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx
@@ -0,0 +1,14 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CircularProgress
+      color="success"
+      formatOptions={{style: "unit", unit: "kilometer"}}
+      label="Speed"
+      showValueLabel={true}
+      size="lg"
+      value={70}
+    />
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/value-formatting.ts b/apps/docs/content/components/circular-progress/value-formatting.ts
index 498c16ff29..0cd558d45d 100644
--- a/apps/docs/content/components/circular-progress/value-formatting.ts
+++ b/apps/docs/content/components/circular-progress/value-formatting.ts
@@ -1,17 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress
-      label="Speed"
-      size="lg"
-      value={70}
-      color="success"
-      formatOptions={{ style: "unit", unit: "kilometer" }}
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/value.raw.jsx b/apps/docs/content/components/circular-progress/value.raw.jsx
new file mode 100644
index 0000000000..fc075f67ac
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/value.raw.jsx
@@ -0,0 +1,23 @@
+import {CircularProgress} 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 (
+    <CircularProgress
+      aria-label="Loading..."
+      color="warning"
+      showValueLabel={true}
+      size="lg"
+      value={value}
+    />
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/value.ts b/apps/docs/content/components/circular-progress/value.ts
index 1915a88907..e2de0e9024 100644
--- a/apps/docs/content/components/circular-progress/value.ts
+++ b/apps/docs/content/components/circular-progress/value.ts
@@ -1,26 +1,4 @@
-const App = `import {CircularProgress} 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 (
-    <CircularProgress
-      aria-label="Loading..."
-      size="lg"
-      value={value}
-      color="warning"
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,