diff --git a/apps/docs/content/components/popover/arrow.raw.jsx b/apps/docs/content/components/popover/arrow.raw.jsx
new file mode 100644
index 0000000000..61a1799eba
--- /dev/null
+++ b/apps/docs/content/components/popover/arrow.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" showArrow={true}>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/arrow.ts b/apps/docs/content/components/popover/arrow.ts
index dcbd90869d..d04dbb0e9d 100644
--- a/apps/docs/content/components/popover/arrow.ts
+++ b/apps/docs/content/components/popover/arrow.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" showArrow={true}>
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/backdrop.raw.jsx b/apps/docs/content/components/popover/backdrop.raw.jsx
new file mode 100644
index 0000000000..0c43b090d7
--- /dev/null
+++ b/apps/docs/content/components/popover/backdrop.raw.jsx
@@ -0,0 +1,38 @@
+import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const content = (
+    <PopoverContent className="w-[240px]">
+      {(titleProps) => (
+        <div className="px-1 py-2 w-full">
+          <p className="text-small font-bold text-foreground" {...titleProps}>
+            Dimensions
+          </p>
+          <div className="mt-2 flex flex-col gap-2 w-full">
+            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
+            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+          </div>
+        </div>
+      )}
+    </PopoverContent>
+  );
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {backdrops.map((backdrop) => (
+        <Popover key={backdrop} showArrow backdrop={backdrop} offset={10} placement="bottom">
+          <PopoverTrigger>
+            <Button className="capitalize" color="warning" variant="flat">
+              {backdrop}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/backdrop.ts b/apps/docs/content/components/popover/backdrop.ts
index be28d365d7..53412b0f5b 100644
--- a/apps/docs/content/components/popover/backdrop.ts
+++ b/apps/docs/content/components/popover/backdrop.ts
@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
-
-export default function App() {
-
-  const backdrops = ["opaque", "blur", "transparent"];
-
-  const content = (
-    <PopoverContent className="w-[240px]">
-      {(titleProps) => (
-        <div className="px-1 py-2 w-full">
-          <p className="text-small font-bold text-foreground" {...titleProps}>
-            Dimensions
-          </p>
-          <div className="mt-2 flex flex-col gap-2 w-full">
-            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
-            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
-            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
-            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
-          </div>
-        </div>
-      )}
-    </PopoverContent>
-  )
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {backdrops.map((backdrop) => (
-        <Popover
-          key={backdrop}
-          showArrow
-          offset={10}
-          placement="bottom"
-          backdrop={backdrop}
-        >
-          <PopoverTrigger>
-            <Button color="warning" variant="flat" className="capitalize">
-              {backdrop}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/colors.raw.jsx b/apps/docs/content/components/popover/colors.raw.jsx
new file mode 100644
index 0000000000..5e255bdb66
--- /dev/null
+++ b/apps/docs/content/components/popover/colors.raw.jsx
@@ -0,0 +1,29 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <Popover key={color} color={color} placement="top">
+          <PopoverTrigger>
+            <Button className="capitalize" color={color}>
+              {color}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/colors.ts b/apps/docs/content/components/popover/colors.ts
index 4cff076495..d5bef810aa 100644
--- a/apps/docs/content/components/popover/colors.ts
+++ b/apps/docs/content/components/popover/colors.ts
@@ -1,40 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => (
-        <Popover key={color} placement="top" color={color}>
-          <PopoverTrigger>
-            <Button color={color} className="capitalize">
-              {color}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/controlled.raw.jsx b/apps/docs/content/components/popover/controlled.raw.jsx
new file mode 100644
index 0000000000..f246c33533
--- /dev/null
+++ b/apps/docs/content/components/popover/controlled.raw.jsx
@@ -0,0 +1,22 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverTrigger>
+          <Button>Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="px-1 py-2">
+            <div className="text-small font-bold">Popover Content</div>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/controlled.ts b/apps/docs/content/components/popover/controlled.ts
index c0dd3736db..2c3f0cacb4 100644
--- a/apps/docs/content/components/popover/controlled.ts
+++ b/apps/docs/content/components/popover/controlled.ts
@@ -1,25 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-        <PopoverTrigger>
-          <Button>Open Popover</Button>
-        </PopoverTrigger>
-        <PopoverContent>
-          <div className="px-1 py-2">
-            <div className="text-small font-bold">Popover Content</div>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        </PopoverContent>
-      </Popover>
-      <p className="text-small text-default-400">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/popover/custom-motion.raw.jsx b/apps/docs/content/components/popover/custom-motion.raw.jsx
new file mode 100644
index 0000000000..3629b32d89
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-motion.raw.jsx
@@ -0,0 +1,45 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            duration: 0.1,
+            transition: {
+              opacity: {
+                duration: 0.15,
+              },
+            },
+          },
+          exit: {
+            y: "10%",
+            opacity: 0,
+            duration: 0,
+            transition: {
+              opacity: {
+                duration: 0.1,
+              },
+            },
+          },
+        },
+      }}
+      offset={10}
+      placement="bottom"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-motion.ts b/apps/docs/content/components/popover/custom-motion.ts
index 90332f7f03..389f462ddd 100644
--- a/apps/docs/content/components/popover/custom-motion.ts
+++ b/apps/docs/content/components/popover/custom-motion.ts
@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover
-      showArrow
-      offset={10}
-      placement="bottom"
-      motionProps={{
-        variants: {
-          enter: {
-            y: 0,
-            opacity: 1,
-            duration: 0.1,
-            transition: {
-              opacity: {
-                duration: 0.15,
-              },
-            },
-          },
-          exit: {
-            y: "10%",
-            opacity: 0,
-            duration: 0,
-            transition: {
-              opacity: {
-                duration: 0.1,
-              },
-            },
-          },
-        },
-      }}
-    >
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/custom-styles.raw.jsx b/apps/docs/content/components/popover/custom-styles.raw.jsx
new file mode 100644
index 0000000000..4c34e65d93
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-styles.raw.jsx
@@ -0,0 +1,36 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      backdrop="opaque"
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-default-200",
+        ],
+        content: [
+          "py-3 px-4 border border-default-200",
+          "bg-gradient-to-br from-white to-default-300",
+          "dark:from-default-100 dark:to-default-50",
+        ],
+      }}
+      placement="right"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-small font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-styles.ts b/apps/docs/content/components/popover/custom-styles.ts
index 42684474c5..da3ea9093a 100644
--- a/apps/docs/content/components/popover/custom-styles.ts
+++ b/apps/docs/content/components/popover/custom-styles.ts
@@ -1,39 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover 
-      showArrow
-      backdrop="opaque"
-      placement="right"
-      classNames={{
-        base: [  
-          // arrow color
-          "before:bg-default-200"
-        ],
-        content: [
-          "py-3 px-4 border border-default-200",
-          "bg-gradient-to-br from-white to-default-300",
-          "dark:from-default-100 dark:to-default-50",
-        ],
-      }}
-    >
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        {(titleProps) => (
-          <div className="px-1 py-2">
-            <h3 className="text-small font-bold" {...titleProps}>
-              Popover Content
-            </h3>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/custom-trigger.raw.jsx b/apps/docs/content/components/popover/custom-trigger.raw.jsx
new file mode 100644
index 0000000000..bca3caa644
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-trigger.raw.jsx
@@ -0,0 +1,85 @@
+import {
+  Avatar,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Button,
+  User,
+} from "@nextui-org/react";
+
+export const UserTwitterCard = () => {
+  const [isFollowed, setIsFollowed] = React.useState(false);
+
+  return (
+    <Card className="max-w-[300px] border-none bg-transparent" shadow="none">
+      <CardHeader className="justify-between">
+        <div className="flex gap-3">
+          <Avatar
+            isBordered
+            radius="full"
+            size="md"
+            src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+          />
+          <div className="flex flex-col items-start justify-center">
+            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
+            <h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
+          </div>
+        </div>
+        <Button
+          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
+          color="primary"
+          radius="full"
+          size="sm"
+          variant={isFollowed ? "bordered" : "solid"}
+          onPress={() => setIsFollowed(!isFollowed)}
+        >
+          {isFollowed ? "Unfollow" : "Follow"}
+        </Button>
+      </CardHeader>
+      <CardBody className="px-3 py-0">
+        <p className="text-small pl-px text-default-500">
+          Full-stack developer, @getnextui lover she/her
+          <span aria-label="confetti" role="img">
+            🎉
+          </span>
+        </p>
+      </CardBody>
+      <CardFooter className="gap-3">
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-600 text-small">4</p>
+          <p className=" text-default-500 text-small">Following</p>
+        </div>
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-600 text-small">97.1K</p>
+          <p className="text-default-500 text-small">Followers</p>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default function App() {
+  return (
+    <Popover showArrow placement="bottom">
+      <PopoverTrigger>
+        <User
+          as="button"
+          avatarProps={{
+            src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+          }}
+          className="transition-transform"
+          description="Product Designer"
+          name="Zoe Lang"
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-1">
+        <UserTwitterCard />
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-trigger.ts b/apps/docs/content/components/popover/custom-trigger.ts
index 48d95eac20..dcc6b44a07 100644
--- a/apps/docs/content/components/popover/custom-trigger.ts
+++ b/apps/docs/content/components/popover/custom-trigger.ts
@@ -1,78 +1,7 @@
-const UserTwitterCard = `import { Avatar, Button, Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react";
-
-export const UserTwitterCard = () => {
-  const [isFollowed, setIsFollowed] = React.useState(false);
-
-  return (
-    <Card shadow="none" className="max-w-[300px] border-none bg-transparent">
-      <CardHeader className="justify-between">
-        <div className="flex gap-3">
-          <Avatar isBordered radius="full" size="md" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-          <div className="flex flex-col items-start justify-center">
-            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
-            <h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
-          </div>
-        </div>
-        <Button
-          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
-          color="primary"
-          radius="full"
-          size="sm"
-          variant={isFollowed ? "bordered" : "solid"}
-          onPress={() => setIsFollowed(!isFollowed)}
-        >
-          {isFollowed ? "Unfollow" : "Follow"}
-        </Button>
-      </CardHeader>
-      <CardBody className="px-3 py-0">
-        <p className="text-small pl-px text-default-500">
-          Full-stack developer, @getnextui lover she/her
-          <span aria-label="confetti" role="img">
-            🎉
-          </span>
-        </p>
-      </CardBody>
-      <CardFooter className="gap-3">
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-600 text-small">4</p>
-          <p className=" text-default-500 text-small">Following</p>
-        </div>
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-600 text-small">97.1K</p>
-          <p className="text-default-500 text-small">Followers</p>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};`;
-
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, User} from "@nextui-org/react";
-import {UserTwitterCard} from "./UserTwitterCard";
-
-export default function App() {
-  return (
-    <Popover showArrow placement="bottom">
-      <PopoverTrigger>
-        <User   
-          as="button"
-          name="Zoe Lang"
-          description="Product Designer"
-          className="transition-transform"
-          avatarProps={{
-            src: "https://i.pravatar.cc/150?u=a04258114e29026702d"
-          }}
-        />
-      </PopoverTrigger>
-      <PopoverContent className="p-1">
-        <UserTwitterCard />
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-trigger.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/UserTwitterCard.jsx": UserTwitterCard,
 };
 
 export default {
diff --git a/apps/docs/content/components/popover/offset.raw.jsx b/apps/docs/content/components/popover/offset.raw.jsx
new file mode 100644
index 0000000000..2658e184d8
--- /dev/null
+++ b/apps/docs/content/components/popover/offset.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover showArrow offset={20} placement="bottom">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/offset.ts b/apps/docs/content/components/popover/offset.ts
index cdcd9328e0..2fb601047c 100644
--- a/apps/docs/content/components/popover/offset.ts
+++ b/apps/docs/content/components/popover/offset.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" offset={20} showArrow>
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/placements.raw.jsx b/apps/docs/content/components/popover/placements.raw.jsx
new file mode 100644
index 0000000000..57e62d3a96
--- /dev/null
+++ b/apps/docs/content/components/popover/placements.raw.jsx
@@ -0,0 +1,42 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const placements = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+    "right-start",
+    "right",
+    "right-end",
+    "left-start",
+    "left",
+    "left-end",
+  ];
+
+  return (
+    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
+      {placements.map((placement) => (
+        <Popover key={placement} color="secondary" placement={placement}>
+          <PopoverTrigger>
+            <Button className="capitalize" color="secondary" variant="flat">
+              {placement.replace("-", " ")}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/placements.ts b/apps/docs/content/components/popover/placements.ts
index 2ec2ca6021..dc67908b7e 100644
--- a/apps/docs/content/components/popover/placements.ts
+++ b/apps/docs/content/components/popover/placements.ts
@@ -1,45 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const placements = [
-    "top-start",
-    "top",
-    "top-end",
-    "bottom-start",
-    "bottom",
-    "bottom-end",
-    "right-start",
-    "right",
-    "right-end",
-    "left-start",
-    "left",
-    "left-end",
-  ];
-
-  return (
-    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
-      {placements.map((placement) => (
-        <Popover key={placement} placement={placement} color="secondary">
-          <PopoverTrigger>
-            <Button color="secondary" variant="flat" className="capitalize">
-              {placement.replace("-", " ")}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/title-props.raw.jsx b/apps/docs/content/components/popover/title-props.raw.jsx
new file mode 100644
index 0000000000..464e8f0730
--- /dev/null
+++ b/apps/docs/content/components/popover/title-props.raw.jsx
@@ -0,0 +1,21 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-small font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/title-props.ts b/apps/docs/content/components/popover/title-props.ts
index 022087fe27..3c92a7ebef 100644
--- a/apps/docs/content/components/popover/title-props.ts
+++ b/apps/docs/content/components/popover/title-props.ts
@@ -1,24 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="right">
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        {(titleProps) => (
-          <div className="px-1 py-2">
-            <h3 className="text-small font-bold" {...titleProps}>
-              Popover Content
-            </h3>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./title-props.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/usage.raw.jsx b/apps/docs/content/components/popover/usage.raw.jsx
new file mode 100644
index 0000000000..2d25bb18f5
--- /dev/null
+++ b/apps/docs/content/components/popover/usage.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/usage.ts b/apps/docs/content/components/popover/usage.ts
index 7f5a4a17eb..1118304c37 100644
--- a/apps/docs/content/components/popover/usage.ts
+++ b/apps/docs/content/components/popover/usage.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="right">
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/variants.raw.jsx b/apps/docs/content/components/popover/variants.raw.jsx
new file mode 100644
index 0000000000..9b08823adf
--- /dev/null
+++ b/apps/docs/content/components/popover/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const variants = ["solid", "bordered", "flat", "faded", "shadow"];
+
+  return (
+    <div className="flex gap-2">
+      {variants.map((variant) => (
+        <Popover key={variant} placement="top" variant={variant}>
+          <PopoverTrigger>
+            <Button className="capitalize" variant={variant}>
+              {variant}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/variants.ts b/apps/docs/content/components/popover/variants.ts
index ee608fd157..ddea95fb2e 100644
--- a/apps/docs/content/components/popover/variants.ts
+++ b/apps/docs/content/components/popover/variants.ts
@@ -1,32 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const variants = ["solid", "bordered", "flat", "faded", "shadow"];
-
-  return (
-    <div className="flex gap-2">
-      {variants.map((variant) => (
-        <Popover key={variant} placement="top" variant={variant}>
-          <PopoverTrigger>
-            <Button variant={variant} className="capitalize">
-              {variant}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/with-form.raw.jsx b/apps/docs/content/components/popover/with-form.raw.jsx
new file mode 100644
index 0000000000..3b9443ad93
--- /dev/null
+++ b/apps/docs/content/components/popover/with-form.raw.jsx
@@ -0,0 +1,26 @@
+import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover showArrow offset={10} placement="bottom">
+      <PopoverTrigger>
+        <Button color="primary">Customize</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[240px]">
+        {(titleProps) => (
+          <div className="px-1 py-2 w-full">
+            <p className="text-small font-bold text-foreground" {...titleProps}>
+              Dimensions
+            </p>
+            <div className="mt-2 flex flex-col gap-2 w-full">
+              <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
+              <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+              <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+              <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/with-form.ts b/apps/docs/content/components/popover/with-form.ts
index 59e869c420..c9a0cff490 100644
--- a/apps/docs/content/components/popover/with-form.ts
+++ b/apps/docs/content/components/popover/with-form.ts
@@ -1,29 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" showArrow offset={10}>
-      <PopoverTrigger>
-        <Button color="primary">Customize</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[240px]">
-        {(titleProps) => (
-          <div className="px-1 py-2 w-full">
-            <p className="text-small font-bold text-foreground" {...titleProps}>
-              Dimensions
-            </p>
-            <div className="mt-2 flex flex-col gap-2 w-full">
-              <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
-              <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
-              <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
-              <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
-            </div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./with-form.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,