diff --git a/apps/docs/content/components/pagination/boundaries.raw.jsx b/apps/docs/content/components/pagination/boundaries.raw.jsx
new file mode 100644
index 0000000000..7c6e436708
--- /dev/null
+++ b/apps/docs/content/components/pagination/boundaries.raw.jsx
@@ -0,0 +1,14 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-5">
+      <p>1 Boundary (default)</p>
+      <Pagination color="secondary" total={10} />
+      <p>2 Boundaries</p>
+      <Pagination boundaries={2} color="secondary" total={10} />
+      <p>3 Boundaries</p>
+      <Pagination boundaries={3} color="secondary" total={10} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/boundaries.ts b/apps/docs/content/components/pagination/boundaries.ts
index 56b1ffe9ef..e3b0fe3955 100644
--- a/apps/docs/content/components/pagination/boundaries.ts
+++ b/apps/docs/content/components/pagination/boundaries.ts
@@ -1,28 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-5">
-      <p>1 Boundary (default)</p>
-      <Pagination
-        total={10}
-        color="secondary"
-      />
-      <p>2 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={2}
-        color="secondary"
-      />
-      <p>3 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={3}
-        color="secondary"
-      />
-    </div>
-  );
-}`;
+import App from "./boundaries.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/colors.raw.jsx b/apps/docs/content/components/pagination/colors.raw.jsx
new file mode 100644
index 0000000000..bf5afca8cd
--- /dev/null
+++ b/apps/docs/content/components/pagination/colors.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {colors.map((color) => (
+        <Pagination key={color} color={color} initialPage={1} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/colors.ts b/apps/docs/content/components/pagination/colors.ts
index d2988d221a..d5bef810aa 100644
--- a/apps/docs/content/components/pagination/colors.ts
+++ b/apps/docs/content/components/pagination/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const colors = ["primary", "secondary", "success", "warning", "danger"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {colors.map((color) => (
-        <Pagination key={color} total={10} initialPage={1} color={color} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/compact.raw.jsx b/apps/docs/content/components/pagination/compact.raw.jsx
new file mode 100644
index 0000000000..c0419e978f
--- /dev/null
+++ b/apps/docs/content/components/pagination/compact.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination isCompact showControls initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/compact.ts b/apps/docs/content/components/pagination/compact.ts
index dff50103bf..c3cdfc316e 100644
--- a/apps/docs/content/components/pagination/compact.ts
+++ b/apps/docs/content/components/pagination/compact.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination isCompact showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/controlled.raw.jsx b/apps/docs/content/components/pagination/controlled.raw.jsx
new file mode 100644
index 0000000000..6580d3b7fc
--- /dev/null
+++ b/apps/docs/content/components/pagination/controlled.raw.jsx
@@ -0,0 +1,30 @@
+import {Pagination, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
+      <Pagination color="secondary" page={currentPage} total={10} onChange={setCurrentPage} />
+      <div className="flex gap-2">
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
+        >
+          Previous
+        </Button>
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/controlled.ts b/apps/docs/content/components/pagination/controlled.ts
index 6b3c4d7c45..2c3f0cacb4 100644
--- a/apps/docs/content/components/pagination/controlled.ts
+++ b/apps/docs/content/components/pagination/controlled.ts
@@ -1,38 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState(1);
-
-  return (
-    <div className="flex flex-col gap-5">
-      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
-      <Pagination
-        total={10}
-        color="secondary"
-        page={currentPage}
-        onChange={setCurrentPage}
-      />
-      <div className="flex gap-2">
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
-        >
-          Previous
-        </Button>
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/controls.raw.jsx b/apps/docs/content/components/pagination/controls.raw.jsx
new file mode 100644
index 0000000000..8b5909bba0
--- /dev/null
+++ b/apps/docs/content/components/pagination/controls.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination showControls initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/controls.ts b/apps/docs/content/components/pagination/controls.ts
index f8db1c1658..74b3403042 100644
--- a/apps/docs/content/components/pagination/controls.ts
+++ b/apps/docs/content/components/pagination/controls.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./controls.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/custom-impl.raw.jsx b/apps/docs/content/components/pagination/custom-impl.raw.jsx
new file mode 100644
index 0000000000..aa3dedd161
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-impl.raw.jsx
@@ -0,0 +1,82 @@
+import {usePagination, PaginationItemType} from "@nextui-org/react";
+
+export const ChevronIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
+    total: 6,
+    showControls: true,
+    siblings: 10,
+    boundaries: 10,
+  });
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p>Active page: {activePage}</p>
+      <ul className="flex gap-2 items-center">
+        {range.map((page) => {
+          if (page === PaginationItemType.NEXT) {
+            return (
+              <li key={page} aria-label="next page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onNext}>
+                  <ChevronIcon className="rotate-180" />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.PREV) {
+            return (
+              <li key={page} aria-label="previous page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onPrevious}>
+                  <ChevronIcon />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.DOTS) {
+            return (
+              <li key={page} className="w-4 h-4">
+                ...
+              </li>
+            );
+          }
+
+          return (
+            <li key={page} aria-label={`page ${page}`} className="w-4 h-4">
+              <button
+                className={cn(
+                  "w-full h-full bg-default-300 rounded-full",
+                  activePage === page && "bg-secondary",
+                )}
+                onClick={() => setPage(page)}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-impl.ts b/apps/docs/content/components/pagination/custom-impl.ts
index 72da8c7611..ab37512cec 100644
--- a/apps/docs/content/components/pagination/custom-impl.ts
+++ b/apps/docs/content/components/pagination/custom-impl.ts
@@ -1,95 +1,7 @@
-const ChevronIcon = `export const ChevronIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const App = `import {usePagination, PaginationItemType} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
-    total: 6,
-    showControls: true,
-    siblings: 10,
-    boundaries: 10,
-  });
-
-  return (
-    <div className="flex flex-col gap-2">
-      <p>Active page: {activePage}</p>
-      <ul className="flex gap-2 items-center">
-        {range.map((page) => {
-          if (page === PaginationItemType.NEXT) {
-            return (
-              <li key={page} aria-label="next page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onNext}
-                >
-                  <ChevronIcon className="rotate-180" />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.PREV) {
-            return (
-              <li key={page} aria-label="previous page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onPrevious}
-                >
-                  <ChevronIcon />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.DOTS) {
-            return (
-              <li key={page} className="w-4 h-4">
-                ...
-              </li>
-            );
-          }
-
-          return (
-            <li key={page} aria-label={\`page \${page}\`} className="w-4 h-4">
-              <button
-                className={cn(
-                  "w-full h-full bg-default-300 rounded-full",
-                  activePage === page && "bg-secondary"
-                )}
-                onClick={() => setPage(page)}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronIcon.jsx": ChevronIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/pagination/custom-items.raw.jsx b/apps/docs/content/components/pagination/custom-items.raw.jsx
new file mode 100644
index 0000000000..d691f8eed1
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-items.raw.jsx
@@ -0,0 +1,88 @@
+import {Pagination, PaginationItemType} from "@nextui-org/react";
+
+export const ChevronIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const renderItem = ({ref, key, value, isActive, onNext, onPrevious, setPage, className}) => {
+    if (value === PaginationItemType.NEXT) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onNext}
+        >
+          <ChevronIcon className="rotate-180" />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.PREV) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onPrevious}
+        >
+          <ChevronIcon />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.DOTS) {
+      return (
+        <button key={key} className={className}>
+          ...
+        </button>
+      );
+    }
+
+    // cursor is the default item
+    return (
+      <button
+        key={key}
+        ref={ref}
+        className={cn(
+          className,
+          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+        )}
+        onClick={() => setPage(value)}
+      >
+        {value}
+      </button>
+    );
+  };
+
+  return (
+    <Pagination
+      disableCursorAnimation
+      showControls
+      className="gap-2"
+      initialPage={1}
+      radius="full"
+      renderItem={renderItem}
+      total={10}
+      variant="light"
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-items.raw.tsx b/apps/docs/content/components/pagination/custom-items.raw.tsx
new file mode 100644
index 0000000000..117c514eb3
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-items.raw.tsx
@@ -0,0 +1,98 @@
+import React, {SVGProps} from "react";
+import {cn, Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react";
+
+type IconSvgProps = SVGProps<SVGSVGElement>;
+
+export const ChevronIcon = (props: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M15.5 19l-7-7 7-7"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
+
+export default function App() {
+  const renderItem = ({
+    ref,
+    key,
+    value,
+    isActive,
+    onNext,
+    onPrevious,
+    setPage,
+    className,
+  }: PaginationItemRenderProps) => {
+    if (value === PaginationItemType.NEXT) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onNext}
+        >
+          <ChevronIcon className="rotate-180" />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.PREV) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onPrevious}
+        >
+          <ChevronIcon />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.DOTS) {
+      return (
+        <button key={key} className={className}>
+          ...
+        </button>
+      );
+    }
+
+    // cursor is the default item
+    return (
+      <button
+        key={key}
+        ref={ref}
+        className={cn(
+          className,
+          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+        )}
+        onClick={() => setPage(value)}
+      >
+        {value}
+      </button>
+    );
+  };
+
+  return (
+    <Pagination
+      disableCursorAnimation
+      showControls
+      className="gap-2"
+      initialPage={1}
+      radius="full"
+      renderItem={renderItem}
+      total={10}
+      variant="light"
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-items.ts b/apps/docs/content/components/pagination/custom-items.ts
index 3e94ff8c6b..708622f442 100644
--- a/apps/docs/content/components/pagination/custom-items.ts
+++ b/apps/docs/content/components/pagination/custom-items.ts
@@ -1,189 +1,12 @@
-const ChevronIcon = `export const ChevronIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const ChevronIconTs = `import {SVGProps} from "react";
-
-type IconSvgProps = SVGProps<SVGSVGElement>;
-
-export const ChevronIcon = (props: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const AppTs = `import {Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const renderItem = ({
-    ref,
-    key,
-    value,
-    isActive,
-    onNext,
-    onPrevious,
-    setPage,
-    className,
-  }: PaginationItemRenderProps) => {
-    if (value === PaginationItemType.NEXT) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onNext}>
-          <ChevronIcon className="rotate-180" />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.PREV) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onPrevious}>
-          <ChevronIcon />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.DOTS) {
-      return <button key={key} className={className}>...</button>;
-    }
-
-    // cursor is the default item
-    return (
-      <button
-        ref={ref}
-        key={key}
-        className={cn(
-          className,
-          isActive &&
-            "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
-        )}
-        onClick={() => setPage(value)}
-      >
-        {value}
-      </button>
-    );
-  };
-
-  return (
-    <Pagination
-      disableCursorAnimation
-      showControls
-      total={10}
-      initialPage={1}
-      className="gap-2"
-      radius="full"
-      renderItem={renderItem}
-      variant="light"
-    />
-  );
-}`;
-
-const App = `import {Pagination, PaginationItemType} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const renderItem = ({
-    ref,
-    key,
-    value,
-    isActive,
-    onNext,
-    onPrevious,
-    setPage,
-    className,
-  }) => {
-    if (value === PaginationItemType.NEXT) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onNext}>
-          <ChevronIcon className="rotate-180" />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.PREV) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onPrevious}>
-          <ChevronIcon />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.DOTS) {
-      return <button key={key} className={className}>...</button>;
-    }
-
-    // cursor is the default item
-    return (
-      <button
-        key={key}
-        ref={ref}
-        className={cn(
-          className,
-          isActive &&
-          "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
-        )}
-        onClick={() => setPage(value)}
-      >
-        {value}
-      </button>
-    );
-  };
-
-  return (
-    <Pagination
-      disableCursorAnimation
-      showControls
-      total={10}
-      initialPage={1}
-      className="gap-2"
-      radius="full"
-      renderItem={renderItem}
-      variant="light"
-    />
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
+import AppTs from "./custom-items.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronIcon.jsx": ChevronIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/ChevronIcon.tsx": ChevronIconTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/pagination/custom-styles.raw.jsx b/apps/docs/content/components/pagination/custom-styles.raw.jsx
new file mode 100644
index 0000000000..2438a31fe2
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-styles.raw.jsx
@@ -0,0 +1,15 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Pagination
+      classNames={{
+        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
+        item: "w-8 h-8 text-small rounded-none bg-transparent",
+        cursor:
+          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
+      }}
+      total={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-styles.ts b/apps/docs/content/components/pagination/custom-styles.ts
index 099f57350e..da3ea9093a 100644
--- a/apps/docs/content/components/pagination/custom-styles.ts
+++ b/apps/docs/content/components/pagination/custom-styles.ts
@@ -1,18 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination
-      total={10}
-      classNames={{
-        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
-        item: "w-8 h-8 text-small rounded-none bg-transparent",
-        cursor:
-          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
-      }}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/disabled.raw.jsx b/apps/docs/content/components/pagination/disabled.raw.jsx
new file mode 100644
index 0000000000..0052b38f31
--- /dev/null
+++ b/apps/docs/content/components/pagination/disabled.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination isDisabled initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/disabled.ts b/apps/docs/content/components/pagination/disabled.ts
index 8e541c5ade..1a215cc91f 100644
--- a/apps/docs/content/components/pagination/disabled.ts
+++ b/apps/docs/content/components/pagination/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination isDisabled total={10} initialPage={1} />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/initial-page.raw.jsx b/apps/docs/content/components/pagination/initial-page.raw.jsx
new file mode 100644
index 0000000000..3c255ae348
--- /dev/null
+++ b/apps/docs/content/components/pagination/initial-page.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination color="warning" initialPage={3} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/initial-page.ts b/apps/docs/content/components/pagination/initial-page.ts
index 0d0dd5277c..7a868386df 100644
--- a/apps/docs/content/components/pagination/initial-page.ts
+++ b/apps/docs/content/components/pagination/initial-page.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination color="warning" initialPage={3} total={10} />
-  );
-}`;
+import App from "./initial-page.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/loop.raw.jsx b/apps/docs/content/components/pagination/loop.raw.jsx
new file mode 100644
index 0000000000..38d37be5d6
--- /dev/null
+++ b/apps/docs/content/components/pagination/loop.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination loop showControls color="success" initialPage={1} total={5} />;
+}
diff --git a/apps/docs/content/components/pagination/loop.ts b/apps/docs/content/components/pagination/loop.ts
index a0b3d320f7..75721e3bc3 100644
--- a/apps/docs/content/components/pagination/loop.ts
+++ b/apps/docs/content/components/pagination/loop.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination loop showControls color="success" total={5} initialPage={1} />
-  );
-}`;
+import App from "./loop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/radius.raw.jsx b/apps/docs/content/components/pagination/radius.raw.jsx
new file mode 100644
index 0000000000..583afb18a4
--- /dev/null
+++ b/apps/docs/content/components/pagination/radius.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "xl", "lg", "md", "sm", "base", "none"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {radius.map((r) => (
+        <Pagination key={r} initialPage={1} radius={r} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/radius.ts b/apps/docs/content/components/pagination/radius.ts
index 6cc77848ac..7b78db1ce0 100644
--- a/apps/docs/content/components/pagination/radius.ts
+++ b/apps/docs/content/components/pagination/radius.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const radius = ["full", "xl", "lg", "md", "sm", "base", "none"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {radius.map((r) => (
-        <Pagination key={r} total={10} initialPage={1} radius={r} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/shadow.raw.jsx b/apps/docs/content/components/pagination/shadow.raw.jsx
new file mode 100644
index 0000000000..a1e25bf9ca
--- /dev/null
+++ b/apps/docs/content/components/pagination/shadow.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination showShadow color="warning" initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts
index 12edcbb3e1..a18f8ca4bf 100644
--- a/apps/docs/content/components/pagination/shadow.ts
+++ b/apps/docs/content/components/pagination/shadow.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination showShadow color="warning" total={10} initialPage={1} />
-  );
-}`;
+import App from "./shadow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/siblings.raw.jsx b/apps/docs/content/components/pagination/siblings.raw.jsx
new file mode 100644
index 0000000000..711a37d3b9
--- /dev/null
+++ b/apps/docs/content/components/pagination/siblings.raw.jsx
@@ -0,0 +1,14 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-5">
+      <p>1 Sibling (default)</p>
+      <Pagination total={10} />
+      <p>2 Siblings</p>
+      <Pagination siblings={2} total={10} />
+      <p>3 Siblings</p>
+      <Pagination siblings={3} total={10} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/siblings.ts b/apps/docs/content/components/pagination/siblings.ts
index e54287d83a..af93036092 100644
--- a/apps/docs/content/components/pagination/siblings.ts
+++ b/apps/docs/content/components/pagination/siblings.ts
@@ -1,25 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-5">
-      <p>1 Sibling (default)</p>
-      <Pagination
-        total={10}
-      />
-      <p>2 Siblings</p>
-      <Pagination
-        total={10}
-        siblings={2}
-      />
-      <p>3 Siblings</p>
-      <Pagination
-        total={10}
-        siblings={3}
-      />
-    </div>
-  );
-}`;
+import App from "./siblings.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/sizes.raw.jsx b/apps/docs/content/components/pagination/sizes.raw.jsx
new file mode 100644
index 0000000000..a91ac73bcb
--- /dev/null
+++ b/apps/docs/content/components/pagination/sizes.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {sizes.map((size) => (
+        <Pagination key={size} initialPage={1} size={size} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts
index 0400dfff03..85a2f5b30b 100644
--- a/apps/docs/content/components/pagination/sizes.ts
+++ b/apps/docs/content/components/pagination/sizes.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const sizes = ["sm", "md", "lg"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {sizes.map((size) => (
-        <Pagination key={size} total={10} initialPage={1} size={size} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/usage.raw.jsx b/apps/docs/content/components/pagination/usage.raw.jsx
new file mode 100644
index 0000000000..7bc069b20d
--- /dev/null
+++ b/apps/docs/content/components/pagination/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/usage.ts b/apps/docs/content/components/pagination/usage.ts
index 7b042283a0..1118304c37 100644
--- a/apps/docs/content/components/pagination/usage.ts
+++ b/apps/docs/content/components/pagination/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination total={10} initialPage={1} />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/variants.raw.jsx b/apps/docs/content/components/pagination/variants.raw.jsx
new file mode 100644
index 0000000000..5de44baff0
--- /dev/null
+++ b/apps/docs/content/components/pagination/variants.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "faded", "light"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {variants.map((variant) => (
+        <Pagination key={variant} initialPage={1} total={10} variant={variant} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/variants.ts b/apps/docs/content/components/pagination/variants.ts
index 7e049b1eb9..ddea95fb2e 100644
--- a/apps/docs/content/components/pagination/variants.ts
+++ b/apps/docs/content/components/pagination/variants.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const variants = ["flat", "bordered", "faded", "light"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {variants.map((variant) => (
-        <Pagination key={variant} total={10} initialPage={1} variant={variant} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,