diff --git a/apps/docs/content/components/tooltip/arrow.raw.jsx b/apps/docs/content/components/tooltip/arrow.raw.jsx
new file mode 100644
index 0000000000..f1b195d705
--- /dev/null
+++ b/apps/docs/content/components/tooltip/arrow.raw.jsx
@@ -0,0 +1,9 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip content="I am a tooltip" showArrow={true}>
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/arrow.ts b/apps/docs/content/components/tooltip/arrow.ts
index d7afa75e90..d04dbb0e9d 100644
--- a/apps/docs/content/components/tooltip/arrow.ts
+++ b/apps/docs/content/components/tooltip/arrow.ts
@@ -1,12 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip showArrow={true} content="I am a tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/colors.raw.jsx b/apps/docs/content/components/tooltip/colors.raw.jsx
new file mode 100644
index 0000000000..37cbf76f7c
--- /dev/null
+++ b/apps/docs/content/components/tooltip/colors.raw.jsx
@@ -0,0 +1,19 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => {
+        return (
+          <Tooltip key={color} className="capitalize" color={color} content={color}>
+            <Button className="capitalize" color={color} variant="flat">
+              {color}
+            </Button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/colors.ts b/apps/docs/content/components/tooltip/colors.ts
index bbdb3a5d4a..d5bef810aa 100644
--- a/apps/docs/content/components/tooltip/colors.ts
+++ b/apps/docs/content/components/tooltip/colors.ts
@@ -1,30 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => {
-        return (
-          <Tooltip key={color} color={color} content={color} className="capitalize">
-            <Button variant="flat" color={color} className="capitalize">
-              {color}
-            </Button>
-          </Tooltip>
-        )
-      })}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/controlled.raw.jsx b/apps/docs/content/components/tooltip/controlled.raw.jsx
new file mode 100644
index 0000000000..ea799c2c5e
--- /dev/null
+++ b/apps/docs/content/components/tooltip/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Tooltip content="I am a tooltip" isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <Button>Hover me</Button>
+      </Tooltip>
+      <p className="text-small text-default-500">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/controlled.ts b/apps/docs/content/components/tooltip/controlled.ts
index 4895d8a455..2c3f0cacb4 100644
--- a/apps/docs/content/components/tooltip/controlled.ts
+++ b/apps/docs/content/components/tooltip/controlled.ts
@@ -1,23 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Tooltip
-        isOpen={isOpen}
-        onOpenChange={(open) => setIsOpen(open)}
-        content="I am a tooltip"
-      >
-        <Button>Hover me</Button>
-      </Tooltip>
-      <p className="text-small text-default-500">
-        Open: {isOpen ? "true" : "false"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-content.raw.jsx b/apps/docs/content/components/tooltip/custom-content.raw.jsx
new file mode 100644
index 0000000000..0108f8e58f
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-content.raw.jsx
@@ -0,0 +1,16 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      content={
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Custom Content</div>
+          <div className="text-tiny">This is a custom tooltip content</div>
+        </div>
+      }
+    >
+      <Button variant="bordered">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-content.ts b/apps/docs/content/components/tooltip/custom-content.ts
index a8f62d64c0..6860587a71 100644
--- a/apps/docs/content/components/tooltip/custom-content.ts
+++ b/apps/docs/content/components/tooltip/custom-content.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip
-      content={
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Custom Content</div>
-          <div className="text-tiny">This is a custom tooltip content</div>
-        </div>
-      }
-    >
-      <Button variant="bordered">
-        Hover me
-      </Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-motion.raw.jsx b/apps/docs/content/components/tooltip/custom-motion.raw.jsx
new file mode 100644
index 0000000000..475cff9379
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-motion.raw.jsx
@@ -0,0 +1,31 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      closeDelay={0}
+      content="I am a tooltip"
+      delay={0}
+      motionProps={{
+        variants: {
+          exit: {
+            opacity: 0,
+            transition: {
+              duration: 0.1,
+              ease: "easeIn",
+            },
+          },
+          enter: {
+            opacity: 1,
+            transition: {
+              duration: 0.15,
+              ease: "easeOut",
+            },
+          },
+        },
+      }}
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-motion.ts b/apps/docs/content/components/tooltip/custom-motion.ts
index dd7ec56f39..389f462ddd 100644
--- a/apps/docs/content/components/tooltip/custom-motion.ts
+++ b/apps/docs/content/components/tooltip/custom-motion.ts
@@ -1,34 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      content="I am a tooltip"
-      delay={0}
-      closeDelay={0}
-      motionProps={{
-        variants: {
-          exit: {
-            opacity: 0,
-            transition: {
-              duration: 0.1,
-              ease: "easeIn",
-            }
-          },
-          enter: {
-            opacity: 1,
-            transition: {
-              duration: 0.15,
-              ease: "easeOut",
-            }
-          },
-        },
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-styles.raw.jsx b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
new file mode 100644
index 0000000000..96dbff1c1b
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
@@ -0,0 +1,20 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      showArrow
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-neutral-400 dark:before:bg-white",
+        ],
+        content: ["py-2 px-4 shadow-xl", "text-black bg-gradient-to-br from-white to-neutral-400"],
+      }}
+      content="I am a tooltip"
+      placement="right"
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-styles.ts b/apps/docs/content/components/tooltip/custom-styles.ts
index d72ba52213..da3ea9093a 100644
--- a/apps/docs/content/components/tooltip/custom-styles.ts
+++ b/apps/docs/content/components/tooltip/custom-styles.ts
@@ -1,26 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      showArrow
-      placement="right"
-      content="I am a tooltip"
-      classNames={{
-        base: [
-          // arrow color
-          "before:bg-neutral-400 dark:before:bg-white",
-        ],
-        content: [
-          "py-2 px-4 shadow-xl",
-          "text-black bg-gradient-to-br from-white to-neutral-400",
-        ],
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/delay-multiple.raw.jsx b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx
new file mode 100644
index 0000000000..c9acae2b11
--- /dev/null
+++ b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx
@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
+        <Button color="primary" variant="flat">
+          Hover me (delay 1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip color="primary" content="Tooltip 2">
+        <Button color="primary" variant="flat">
+          Then hover me
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/delay-multiple.ts b/apps/docs/content/components/tooltip/delay-multiple.ts
index 71336f2312..c9f4aabd4d 100644
--- a/apps/docs/content/components/tooltip/delay-multiple.ts
+++ b/apps/docs/content/components/tooltip/delay-multiple.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
-        <Button color="primary" variant="flat">
-          Hover me (delay 1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="primary" content="Tooltip 2">
-        <Button color="primary" variant="flat">
-          Then hover me
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay-multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/delay.raw.jsx b/apps/docs/content/components/tooltip/delay.raw.jsx
new file mode 100644
index 0000000000..86a3124e73
--- /dev/null
+++ b/apps/docs/content/components/tooltip/delay.raw.jsx
@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
+        <Button color="warning" variant="flat">
+          Delay Open (1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip closeDelay={2000} color="warning" content="Tooltip 2">
+        <Button color="warning" variant="flat">
+          Delay Close (2000ms)
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/delay.ts b/apps/docs/content/components/tooltip/delay.ts
index 2dec1051a3..29e870bcca 100644
--- a/apps/docs/content/components/tooltip/delay.ts
+++ b/apps/docs/content/components/tooltip/delay.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
-        <Button color="warning" variant="flat">
-          Delay Open (1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="warning" closeDelay={2000} content="Tooltip 2">
-        <Button color="warning" variant="flat">
-          Delay Close (2000ms)
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/offset.raw.jsx b/apps/docs/content/components/tooltip/offset.raw.jsx
new file mode 100644
index 0000000000..96e38fa36a
--- /dev/null
+++ b/apps/docs/content/components/tooltip/offset.raw.jsx
@@ -0,0 +1,23 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="success" content="Tooltip 1">
+        <Button color="success" variant="faded">
+          Default offset (7)
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 2" offset={15}>
+        <Button color="success" variant="faded">
+          15 offset
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 3" offset={-7}>
+        <Button color="success" variant="faded">
+          -7 offset
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/offset.ts b/apps/docs/content/components/tooltip/offset.ts
index d3669f7017..2fb601047c 100644
--- a/apps/docs/content/components/tooltip/offset.ts
+++ b/apps/docs/content/components/tooltip/offset.ts
@@ -1,26 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip content="Tooltip 1" color="success">
-        <Button color="success" variant="faded">
-          Default offset (7)
-        </Button>
-      </Tooltip>
-      <Tooltip content="Tooltip 2" color="success" offset={15}>
-        <Button color="success" variant="faded">
-          15 offset
-        </Button>
-      </Tooltip>
-      <Tooltip content="Tooltip 3" color="success" offset={-7}>
-        <Button color="success" variant="faded">
-          -7 offset
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/placements.raw.jsx b/apps/docs/content/components/tooltip/placements.raw.jsx
new file mode 100644
index 0000000000..edfebd1494
--- /dev/null
+++ b/apps/docs/content/components/tooltip/placements.raw.jsx
@@ -0,0 +1,30 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const placements = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+    "left-start",
+    "left",
+    "left-end",
+    "right-start",
+    "right",
+    "right-end",
+  ];
+
+  return (
+    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
+      {placements.map((placement) => (
+        <Tooltip key={placement} color="secondary" content={placement} placement={placement}>
+          <Button className="capitalize" color="secondary" variant="flat">
+            {placement}
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/placements.ts b/apps/docs/content/components/tooltip/placements.ts
index cf304818c2..dc67908b7e 100644
--- a/apps/docs/content/components/tooltip/placements.ts
+++ b/apps/docs/content/components/tooltip/placements.ts
@@ -1,38 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "top-start",
-    "top",
-    "top-end",
-    "bottom-start",
-    "bottom",
-    "bottom-end",
-    "left-start",
-    "left",
-    "left-end",
-    "right-start",
-    "right",
-    "right-end",
-  ];
-
-  return (
-    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
-      {placements.map((placement) => (
-        <Tooltip
-          key={placement}
-          placement={placement}
-          content={placement}
-          color="secondary"
-        >
-          <Button variant="flat" color="secondary" className="capitalize">
-            {placement}
-          </Button>
-        </Tooltip>
-      ))}
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/usage.raw.jsx b/apps/docs/content/components/tooltip/usage.raw.jsx
new file mode 100644
index 0000000000..eeb11415d2
--- /dev/null
+++ b/apps/docs/content/components/tooltip/usage.raw.jsx
@@ -0,0 +1,9 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip content="I am a tooltip">
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/usage.ts b/apps/docs/content/components/tooltip/usage.ts
index e438e386b9..1118304c37 100644
--- a/apps/docs/content/components/tooltip/usage.ts
+++ b/apps/docs/content/components/tooltip/usage.ts
@@ -1,12 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip content="I am a tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,