diff --git a/apps/docs/content/components/badge/a11y.raw.jsx b/apps/docs/content/components/badge/a11y.raw.jsx
new file mode 100644
index 0000000000..6e8fe17155
--- /dev/null
+++ b/apps/docs/content/components/badge/a11y.raw.jsx
@@ -0,0 +1,31 @@
+import {Badge, Button} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Badge color="danger" content="99+" shape="circle">
+      <Button isIconOnly aria-label="more than 99 notifications" radius="full" variant="light">
+        <NotificationIcon size={24} />
+      </Button>
+    </Badge>
+  );
+}
diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts
index ede5ba5ed3..e53640d68b 100644
--- a/apps/docs/content/components/badge/a11y.ts
+++ b/apps/docs/content/components/badge/a11y.ts
@@ -1,44 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Button} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-
-export default function App() {
-  return (
-    <Badge content="99+" shape="circle" color="danger">
-      <Button
-        radius="full"
-        isIconOnly
-        aria-label="more than 99 notifications"
-        variant="light"
-      >
-        <NotificationIcon size={24} />
-      </Button>
-    </Badge>
-  );
-}`;
+import App from "./a11y.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/badge/colors.raw.jsx b/apps/docs/content/components/badge/colors.raw.jsx
new file mode 100644
index 0000000000..b7358bee7e
--- /dev/null
+++ b/apps/docs/content/components/badge/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="default" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="primary" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="secondary" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+      </Badge>
+      <Badge color="success" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+      <Badge color="warning" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="danger" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts
index 1a79742830..d5bef810aa 100644
--- a/apps/docs/content/components/badge/colors.ts
+++ b/apps/docs/content/components/badge/colors.ts
@@ -1,47 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" color="default">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="secondary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge content="5" color="success">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-      <Badge content="5" color="warning">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="danger">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/content-examples.raw.jsx b/apps/docs/content/components/badge/content-examples.raw.jsx
new file mode 100644
index 0000000000..0850c9000d
--- /dev/null
+++ b/apps/docs/content/components/badge/content-examples.raw.jsx
@@ -0,0 +1,80 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 18}
+      viewBox="0 0 24 24"
+      width={size || width || 18}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-5 items-center">
+      <Badge color="danger" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      </Badge>
+      <Badge color="success" content="" placement="bottom-right" shape="circle">
+        <Avatar radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="danger" content="new" size="sm">
+        <Avatar
+          isBordered
+          color="danger"
+          radius="md"
+          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
+        />
+      </Badge>
+      <Badge isOneChar color="success" content={<CheckIcon />} placement="bottom-right">
+        <Avatar
+          isBordered
+          color="success"
+          radius="md"
+          src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+        />
+      </Badge>
+      <Badge
+        isOneChar
+        color="danger"
+        content={<NotificationIcon size={12} />}
+        placement="top-right"
+        shape="circle"
+      >
+        <Avatar radius="full" size="lg" src="https://i.pravatar.cc/300?u=a042581f4e29026704f" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/content-examples.ts b/apps/docs/content/components/badge/content-examples.ts
index e5a43ff2a2..f21e28ce52 100644
--- a/apps/docs/content/components/badge/content-examples.ts
+++ b/apps/docs/content/components/badge/content-examples.ts
@@ -1,110 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 18}
-      height={size || height || 18}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
-        stroke="currentColor"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <div className="flex gap-5 items-center">
-      <Badge content="5" color="danger">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
-      <Badge content="" color="success" shape="circle" placement="bottom-right">
-        <Avatar
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="new" color="danger" size="sm">
-        <Avatar
-          isBordered
-          radius="md"
-          color="danger"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge
-        isOneChar
-        content={<CheckIcon />}
-        color="success"
-        placement="bottom-right"
-      >
-        <Avatar
-          isBordered
-          color="success"
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e290267072"
-        />
-      </Badge>
-      <Badge
-        isOneChar
-        content={<NotificationIcon size={12} />}
-        color="danger"
-        shape="circle"
-        placement="top-right"
-      >
-        <Avatar
-          radius="full"
-          size="lg"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./content-examples.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/badge/placements.raw.jsx b/apps/docs/content/components/badge/placements.raw.jsx
new file mode 100644
index 0000000000..749e64888f
--- /dev/null
+++ b/apps/docs/content/components/badge/placements.raw.jsx
@@ -0,0 +1,20 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" placement="top-right">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" placement="bottom-right">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="danger" content="5" placement="top-left">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="danger" content="5" placement="bottom-left">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/placements.ts b/apps/docs/content/components/badge/placements.ts
index 6a4af7b820..dc67908b7e 100644
--- a/apps/docs/content/components/badge/placements.ts
+++ b/apps/docs/content/components/badge/placements.ts
@@ -1,39 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" placement="top-right">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="bottom-right">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="top-left">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="bottom-left">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/shapes.raw.jsx b/apps/docs/content/components/badge/shapes.raw.jsx
new file mode 100644
index 0000000000..59777647f1
--- /dev/null
+++ b/apps/docs/content/components/badge/shapes.raw.jsx
@@ -0,0 +1,14 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" shape="rectangle">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" shape="circle">
+        <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/shapes.ts b/apps/docs/content/components/badge/shapes.ts
index 8f6370503f..75524eae1f 100644
--- a/apps/docs/content/components/badge/shapes.ts
+++ b/apps/docs/content/components/badge/shapes.ts
@@ -1,25 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" shape="rectangle">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" shape="circle">
-        <Avatar
-          isBordered
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./shapes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/show-outline.raw.jsx b/apps/docs/content/components/badge/show-outline.raw.jsx
new file mode 100644
index 0000000000..960ab3f524
--- /dev/null
+++ b/apps/docs/content/components/badge/show-outline.raw.jsx
@@ -0,0 +1,14 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" shape="rectangle" showOutline={false}>
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" shape="circle" showOutline={false}>
+        <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/show-outline.ts b/apps/docs/content/components/badge/show-outline.ts
index d11a8860bf..83f4e660d3 100644
--- a/apps/docs/content/components/badge/show-outline.ts
+++ b/apps/docs/content/components/badge/show-outline.ts
@@ -1,25 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" shape="rectangle" showOutline={false}>
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" shape="circle" showOutline={false}>
-        <Avatar
-          isBordered
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./show-outline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/sizes.raw.jsx b/apps/docs/content/components/badge/sizes.raw.jsx
new file mode 100644
index 0000000000..cdf37c6067
--- /dev/null
+++ b/apps/docs/content/components/badge/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="primary" content="5" size="sm">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="primary" content="5" size="md">
+        <Avatar radius="md" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+      </Badge>
+      <Badge color="primary" content="5" size="lg">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts
index c212de05ea..85a2f5b30b 100644
--- a/apps/docs/content/components/badge/sizes.ts
+++ b/apps/docs/content/components/badge/sizes.ts
@@ -1,29 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" size="sm" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" size="md" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge content="5" size="lg" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/usage.raw.jsx b/apps/docs/content/components/badge/usage.raw.jsx
new file mode 100644
index 0000000000..1599fc5a23
--- /dev/null
+++ b/apps/docs/content/components/badge/usage.raw.jsx
@@ -0,0 +1,9 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Badge color="primary" content="5">
+      <Avatar radius="md" size="lg" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+    </Badge>
+  );
+}
diff --git a/apps/docs/content/components/badge/usage.ts b/apps/docs/content/components/badge/usage.ts
index a4ca4998a3..1118304c37 100644
--- a/apps/docs/content/components/badge/usage.ts
+++ b/apps/docs/content/components/badge/usage.ts
@@ -1,16 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Badge content="5" color="primary">
-      <Avatar
-        radius="md"
-        size="lg"
-        src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-      />
-    </Badge>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/variants.raw.jsx b/apps/docs/content/components/badge/variants.raw.jsx
new file mode 100644
index 0000000000..ab7ef5a02c
--- /dev/null
+++ b/apps/docs/content/components/badge/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="warning" content="5" variant="solid">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="warning" content="5" variant="flat">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="warning" content="5" variant="faded">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="warning" content="5" variant="shadow">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/variants.ts b/apps/docs/content/components/badge/variants.ts
index cc466b3b71..ddea95fb2e 100644
--- a/apps/docs/content/components/badge/variants.ts
+++ b/apps/docs/content/components/badge/variants.ts
@@ -1,35 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" color="warning" variant="solid">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="flat">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="faded">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="shadow">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/visibility.raw.jsx b/apps/docs/content/components/badge/visibility.raw.jsx
new file mode 100644
index 0000000000..c22ce8b40b
--- /dev/null
+++ b/apps/docs/content/components/badge/visibility.raw.jsx
@@ -0,0 +1,71 @@
+import {Badge, Switch} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CartIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isInvisible, setIsInvisible] = React.useState(false);
+
+  return (
+    <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
+        <Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
+          <NotificationIcon className="fill-current" size={30} />
+        </Badge>
+        <Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
+          <CartIcon size={30} />
+        </Badge>
+      </div>
+      <Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
+        Show badge
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/visibility.ts b/apps/docs/content/components/badge/visibility.ts
index 3729cfaaef..8cc2818a7b 100644
--- a/apps/docs/content/components/badge/visibility.ts
+++ b/apps/docs/content/components/badge/visibility.ts
@@ -1,81 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
-        fill='currentColor'
-      />
-      <path
-        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
-        fill='currentColor'
-      />
-      <path
-        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
-        fill='currentColor'
-      />
-      <path
-        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
-        fill='currentColor'
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Avatar, Switch} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CartIcon} from "./CartIcon";
-
-export default function App() {
-  const [isInvisible, setIsInvisible] = React.useState(false);
-
-  return (
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-3">
-        <Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
-          <NotificationIcon className="fill-current" size={30} />
-        </Badge>
-        <Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
-          <CartIcon size={30} />
-        </Badge>
-      </div>
-      <Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
-        Show badge
-      </Switch>
-    </div>
-  );
-}`;
+import App from "./visibility.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CartIcon.jsx": CartIcon,
 };
 
 export default {