diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.jsx b/apps/docs/content/components/date-range-picker/controlled.raw.jsx
new file mode 100644
index 0000000000..fd7b3063f3
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/controlled.raw.jsx
@@ -0,0 +1,36 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.tsx b/apps/docs/content/components/date-range-picker/controlled.raw.tsx
new file mode 100644
index 0000000000..868b5440f2
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/controlled.raw.tsx
@@ -0,0 +1,40 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<RangeValue<DateValue>>({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/controlled.ts b/apps/docs/content/components/date-range-picker/controlled.ts
index 12f5e4d8ae..1f1a363363 100644
--- a/apps/docs/content/components/date-range-picker/controlled.ts
+++ b/apps/docs/content/components/date-range-picker/controlled.ts
@@ -1,86 +1,5 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-import {RangeValue} from "@react-types/shared";
-import {DateValue} from "@react-types/datepicker";
-
-export default function App() {
-  const [value, setValue] = React.useState<RangeValue<DateValue>>({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx
new file mode 100644
index 0000000000..17a676327c
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx
@@ -0,0 +1,33 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      calendarProps={{
+        classNames: {
+          base: "bg-background",
+          headerWrapper: "pt-4 bg-background",
+          prevButton: "border-1 border-default-200 rounded-small",
+          nextButton: "border-1 border-default-200 rounded-small",
+          gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+          cellButton: [
+            "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+            // start (pseudo)
+            "data-[range-start=true]:before:rounded-l-small",
+            "data-[selection-start=true]:before:rounded-l-small",
+            // end (pseudo)
+            "data-[range-end=true]:before:rounded-r-small",
+            "data-[selection-end=true]:before:rounded-r-small",
+            // start (selected)
+            "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+            // end (selected)
+            "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+          ],
+        },
+      }}
+      className="max-w-xs"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/custom-styles.ts b/apps/docs/content/components/date-range-picker/custom-styles.ts
index 6c11daf883..da3ea9093a 100644
--- a/apps/docs/content/components/date-range-picker/custom-styles.ts
+++ b/apps/docs/content/components/date-range-picker/custom-styles.ts
@@ -1,36 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-        calendarProps={{
-          classNames: {
-            base: "bg-background",
-            headerWrapper: "pt-4 bg-background",
-            prevButton: "border-1 border-default-200 rounded-small",
-            nextButton: "border-1 border-default-200 rounded-small",
-            gridHeader: "bg-background shadow-none border-b-1 border-default-100",
-            cellButton: [
-              "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
-              // start (pseudo)
-              "data-[range-start=true]:before:rounded-l-small",
-              "data-[selection-start=true]:before:rounded-l-small",
-              // end (pseudo)
-              "data-[range-end=true]:before:rounded-r-small",
-              "data-[selection-end=true]:before:rounded-r-small",
-              // start (selected)
-              "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
-              // end (selected)
-              "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
-            ],
-          },
-      }}
-      className="max-w-xs"
-      label="Stay duration"
-      variant="bordered"
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/description.raw.jsx b/apps/docs/content/components/date-range-picker/description.raw.jsx
new file mode 100644
index 0000000000..0300812373
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/description.raw.jsx
@@ -0,0 +1,11 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      className="max-w-xs"
+      description="Please enter your stay duration"
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/description.ts b/apps/docs/content/components/date-range-picker/description.ts
index a81889d1bd..aeb6340b6b 100644
--- a/apps/docs/content/components/date-range-picker/description.ts
+++ b/apps/docs/content/components/date-range-picker/description.ts
@@ -1,14 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-      label="Stay duration"
-      description="Please enter your stay duration"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/disabled.raw.jsx b/apps/docs/content/components/date-range-picker/disabled.raw.jsx
new file mode 100644
index 0000000000..c1ac55a525
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/disabled.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isDisabled
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/disabled.ts b/apps/docs/content/components/date-range-picker/disabled.ts
index ea2ff51167..1a215cc91f 100644
--- a/apps/docs/content/components/date-range-picker/disabled.ts
+++ b/apps/docs/content/components/date-range-picker/disabled.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isDisabled
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx
new file mode 100644
index 0000000000..db1263f550
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx
@@ -0,0 +1,22 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter your stay duration";
+        }
+      }}
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/error-message-function.ts b/apps/docs/content/components/date-range-picker/error-message-function.ts
index 9e8cb16eab..1af0006141 100644
--- a/apps/docs/content/components/date-range-picker/error-message-function.ts
+++ b/apps/docs/content/components/date-range-picker/error-message-function.ts
@@ -1,25 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter your stay duration";
-        }
-      }}
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/error-message.raw.jsx b/apps/docs/content/components/date-range-picker/error-message.raw.jsx
new file mode 100644
index 0000000000..fe6d92e392
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/error-message.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage="Please enter your stay duration"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/error-message.ts b/apps/docs/content/components/date-range-picker/error-message.ts
index ed0abd8ab5..fb8101b132 100644
--- a/apps/docs/content/components/date-range-picker/error-message.ts
+++ b/apps/docs/content/components/date-range-picker/error-message.ts
@@ -1,21 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage="Please enter your stay duration"
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.jsx b/apps/docs/content/components/date-range-picker/granularity.raw.jsx
new file mode 100644
index 0000000000..46d82da6ac
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/granularity.raw.jsx
@@ -0,0 +1,28 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState({
+    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
+  });
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        fullWidth
+        granularity="second"
+        label="Date and time range"
+        value={date}
+        onChange={setDate}
+      />
+      <DateRangePicker
+        fullWidth
+        granularity="day"
+        label="Date range"
+        value={date}
+        onChange={setDate}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.tsx b/apps/docs/content/components/date-range-picker/granularity.raw.tsx
new file mode 100644
index 0000000000..e1ec7fb919
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/granularity.raw.tsx
@@ -0,0 +1,32 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
+  });
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        fullWidth
+        granularity="second"
+        label="Date and time range"
+        value={date}
+        onChange={setDate}
+      />
+      <DateRangePicker
+        fullWidth
+        granularity="day"
+        label="Date range"
+        value={date}
+        onChange={setDate}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/granularity.ts b/apps/docs/content/components/date-range-picker/granularity.ts
index 10094d839a..6196832da6 100644
--- a/apps/docs/content/components/date-range-picker/granularity.ts
+++ b/apps/docs/content/components/date-range-picker/granularity.ts
@@ -1,67 +1,15 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState({
-    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
-  });
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        fullWidth
-        granularity="second"
-        label="Date and time range"
-        value={date}
-        onChange={setDate}
-      />
-      <DateRangePicker
-        fullWidth
-        granularity="day"
-        label="Date range"
-        value={date}
-        onChange={setDate}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
-
-export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
-    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
-  });
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        fullWidth
-        granularity="second"
-        label="Date and time range"
-        value={date}
-        onChange={setDate}
-      />
-      <DateRangePicker
-        fullWidth
-        granularity="day"
-        label="Date range"
-        value={date}
-        onChange={setDate}
-      />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx
new file mode 100644
index 0000000000..75e82363c9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState({
+    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx
new file mode 100644
index 0000000000..c6eca23922
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx
@@ -0,0 +1,22 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.ts b/apps/docs/content/components/date-range-picker/international-calendar.ts
index e28d31e8ea..a8707fd093 100644
--- a/apps/docs/content/components/date-range-picker/international-calendar.ts
+++ b/apps/docs/content/components/date-range-picker/international-calendar.ts
@@ -1,47 +1,15 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState({
-    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
-    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
+import App from "./international-calendar.raw.jsx?raw";
+import AppTs from "./international-calendar.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-range-picker/label-placements.raw.jsx b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx
new file mode 100644
index 0000000000..1f5b70d378
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx
@@ -0,0 +1,20 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        {placements.map((placement) => (
+          <DateRangePicker
+            key={placement}
+            description={placement}
+            label="Stay duration"
+            labelPlacement={placement}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/label-placements.ts b/apps/docs/content/components/date-range-picker/label-placements.ts
index ae0d8f4c5b..cd2a65d352 100644
--- a/apps/docs/content/components/date-range-picker/label-placements.ts
+++ b/apps/docs/content/components/date-range-picker/label-placements.ts
@@ -1,27 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        {placements.map((placement) => (
-          <DateRangePicker
-            key={placement}
-            label="Stay duration"
-            labelPlacement={placement}
-            description={placement}
-          />
-        ))}
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..b3557e1621
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx
@@ -0,0 +1,31 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <div className="w-full flex flex-col gap-1">
+        <h3>Min date</h3>
+        <DateRangePicker
+          defaultValue={{
+            start: today(getLocalTimeZone()).subtract({days: 1}),
+            end: parseDate("2024-04-08"),
+          }}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-1">
+        <h3>Max date</h3>
+        <DateRangePicker
+          defaultValue={{
+            start: today(getLocalTimeZone()).subtract({days: 1}),
+            end: parseDate("2024-04-08"),
+          }}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.ts b/apps/docs/content/components/date-range-picker/min-and-max-date.ts
index a1db8afe8f..be9af0fc43 100644
--- a/apps/docs/content/components/date-range-picker/min-and-max-date.ts
+++ b/apps/docs/content/components/date-range-picker/min-and-max-date.ts
@@ -1,34 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <div className="w-full flex flex-col gap-1">
-        <h3>Min date</h3>
-        <DateRangePicker
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={{
-            start: today(getLocalTimeZone()).subtract({days: 1}),
-            end: parseDate("2024-04-08"),
-          }}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-1">
-        <h3>Max date</h3>
-        <DateRangePicker
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={{
-            start: today(getLocalTimeZone()).subtract({days: 1}),
-            end: parseDate("2024-04-08"),
-          }}
-        />
-      </div>
-    </div>
-  );
-}`;
+import App from "./min-and-max-date.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx
new file mode 100644
index 0000000000..ea418e7815
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx
@@ -0,0 +1,17 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {isWeekend, today, getLocalTimeZone} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let {locale} = useLocale();
+
+  return (
+    <DateRangePicker
+      allowsNonContiguousRanges
+      isDateUnavailable={(date) => isWeekend(date, locale)}
+      label="Time off request"
+      minValue={today(getLocalTimeZone())}
+      visibleMonths={2}
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.ts b/apps/docs/content/components/date-range-picker/non-contiguous.ts
index a85e7f570e..1d0c412e68 100644
--- a/apps/docs/content/components/date-range-picker/non-contiguous.ts
+++ b/apps/docs/content/components/date-range-picker/non-contiguous.ts
@@ -1,20 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {isWeekend, today, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let {locale} = useLocale();
-
-  return (
-    <DateRangePicker
-      allowsNonContiguousRanges
-      isDateUnavailable={(date) => isWeekend(date, locale)}
-      label="Time off request"
-      minValue={today(getLocalTimeZone())}
-      visibleMonths={2}
-    />
-  );
-}`;
+import App from "./non-contiguous.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx
new file mode 100644
index 0000000000..a7493015c9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Birth date" pageBehavior="single" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/page-behavior.ts b/apps/docs/content/components/date-range-picker/page-behavior.ts
index 49d92881d7..70c2ebfd2f 100644
--- a/apps/docs/content/components/date-range-picker/page-behavior.ts
+++ b/apps/docs/content/components/date-range-picker/page-behavior.ts
@@ -1,16 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Birth date"
-        visibleMonths={2}
-        pageBehavior="single"
-      />
-    </div> 
-  );
-}`;
+import App from "./page-behavior.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/presets.raw.jsx b/apps/docs/content/components/date-range-picker/presets.raw.jsx
new file mode 100644
index 0000000000..6a14eaf429
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/presets.raw.jsx
@@ -0,0 +1,122 @@
+import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {
+  today,
+  startOfWeek,
+  startOfMonth,
+  endOfWeek,
+  endOfMonth,
+  getLocalTimeZone,
+} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = {
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({days: 7}),
+  };
+  let [value, setValue] = React.useState(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+  let now = today(getLocalTimeZone());
+  let nextWeek = {
+    start: startOfWeek(now.add({weeks: 1}), locale),
+    end: endOfWeek(now.add({weeks: 1}), locale),
+  };
+  let nextMonth = {
+    start: startOfMonth(now.add({months: 1})),
+    end: endOfMonth(now.add({months: 1})),
+  };
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DateRangePicker
+        CalendarBottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper:
+                "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        CalendarTopContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button
+              onPress={() =>
+                setValue({
+                  start: now,
+                  end: now.add({days: 7}),
+                })
+              }
+            >
+              This week
+            </Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value.start,
+          onFocusChange: (val) => setValue({...value, start: val}),
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date:{" "}
+        {value
+          ? formatter.formatRange(
+              value.start.toDate(getLocalTimeZone()),
+              value.end.toDate(getLocalTimeZone()),
+            )
+          : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts
index 6bf954195b..a73828a679 100644
--- a/apps/docs/content/components/date-range-picker/presets.ts
+++ b/apps/docs/content/components/date-range-picker/presets.ts
@@ -1,241 +1,7 @@
-const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = {
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({days: 7}),
-  };
-  let [value, setValue] = React.useState(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-  let now = today(getLocalTimeZone());
-  let nextWeek = {
-    start: startOfWeek(now.add({weeks: 1}), locale),
-    end: endOfWeek(now.add({weeks: 1}), locale),
-  };
-  let nextMonth = {
-    start: startOfMonth(now.add({months: 1})),
-    end: endOfMonth(now.add({months: 1})),
-  };
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full max-w-sm">
-      <DateRangePicker
-        CalendarBottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper:
-                "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        CalendarTopContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button
-              onPress={() =>
-                setValue({
-                  start: now,
-                  end: now.add({days: 7}),
-                })
-              }
-            >
-              This week
-            </Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value?.start,
-          onFocusChange: (val) => setValue({...value, start: val}),
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date:{" "}
-        {value
-          ? formatter.formatRange(
-              value.start.toDate(getLocalTimeZone()),
-              value.end.toDate(getLocalTimeZone()),
-            )
-          : "--"}
-      </p>
-    </div>
-  );
-}`;
-
-// const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-// import {now, today, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-// import {useLocale} from "@react-aria/i18n";
-// import {RangeValue} from "@react-types/shared";
-
-// export default function App() {
-//   let defaultDate = {
-//     start: today(getLocalTimeZone()),
-//     end: today(getLocalTimeZone()).add({days: 7}),
-//   };
-
-//   const [value, setValue] = React.useState<RangeValue<DateValue>>(defaultDate);
-
-//   let {locale} = useLocale();
-//   let formatter = useDateFormatter({dateStyle: "full"});
-
-//   let now = today(getLocalTimeZone());
-//   let nextWeek = {
-//     start: startOfWeek(now.add({weeks: 1}), locale),
-//     end: endOfWeek(now.add({weeks: 1}), locale),
-//   };
-//   let nextMonth = {
-//     start: startOfMonth(now.add({months: 1})),
-//     end: endOfMonth(now.add({months: 1})),
-//   };
-
-//   const CustomRadio = (props) => {
-//     const {children, ...otherProps} = props;
-
-//     return (
-//       <Radio
-//         {...otherProps}
-//         classNames={{
-//           base: cn(
-//             "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-//             "cursor-pointer rounded-full border-2 border-default-200/60",
-//             "data-[selected=true]:border-primary",
-//           ),
-//           label: "text-tiny text-default-500",
-//           labelWrapper: "px-1 m-0",
-//           wrapper: "hidden",
-//         }}
-//       >
-//         {children}
-//       </Radio>
-//     );
-//   };
-
-//   return (
-//     <div className="flex flex-col gap-4 w-full max-w-sm">
-//       <DateRangePicker
-//         CalendarBottomContent={
-//           <RadioGroup
-//             aria-label="Date precision"
-//             classNames={{
-//               base: "w-full pb-2",
-//               wrapper:
-//                 "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
-//             }}
-//             defaultValue="exact_dates"
-//             orientation="horizontal"
-//           >
-//             <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-//             <CustomRadio value="1_day">1 day</CustomRadio>
-//             <CustomRadio value="2_days">2 days</CustomRadio>
-//             <CustomRadio value="3_days">3 days</CustomRadio>
-//             <CustomRadio value="7_days">7 days</CustomRadio>
-//             <CustomRadio value="14_days">14 days</CustomRadio>
-//           </RadioGroup>
-//         }
-//         CalendarTopContent={
-//           <ButtonGroup
-//             fullWidth
-//             className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-//             radius="full"
-//             size="sm"
-//             variant="bordered"
-//           >
-//             <Button
-//               onPress={() =>
-//                 setValue({
-//                   start: now,
-//                   end: now.add({days: 7}),
-//                 })
-//               }
-//             >
-//               This week
-//             </Button>
-//             <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-//             <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-//           </ButtonGroup>
-//         }
-//         calendarProps={{
-//           focusedValue: value.start,
-//           onFocusChange: (val) => setValue({...value, start: val}),
-//           nextButtonProps: {
-//             variant: "bordered",
-//           },
-//           prevButtonProps: {
-//             variant: "bordered",
-//           },
-//         }}
-//         value={value}
-//         onChange={setValue}
-//         label="Event date"
-//       />
-//       <p className="text-default-500 text-sm">
-//         Selected date:{" "}
-//         {value
-//           ? formatter.formatRange(
-//               value.start.toDate(getLocalTimeZone()),
-//               value.end.toDate(getLocalTimeZone()),
-//             )
-//           : "--"}
-//       </p>
-//     </div>
-//   );
-// }`;
+import App from "./presets.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  // "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-range-picker/readonly.raw.jsx b/apps/docs/content/components/date-range-picker/readonly.raw.jsx
new file mode 100644
index 0000000000..11e281d0a9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/readonly.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isReadOnly
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/readonly.ts b/apps/docs/content/components/date-range-picker/readonly.ts
index 4ac98ed8b4..fabd05ba36 100644
--- a/apps/docs/content/components/date-range-picker/readonly.ts
+++ b/apps/docs/content/components/date-range-picker/readonly.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isReadOnly
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/required.raw.jsx b/apps/docs/content/components/date-range-picker/required.raw.jsx
new file mode 100644
index 0000000000..8076e8e767
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/required.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isRequired
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/required.ts b/apps/docs/content/components/date-range-picker/required.ts
index c3c9e0bbd1..b50b781e6f 100644
--- a/apps/docs/content/components/date-range-picker/required.ts
+++ b/apps/docs/content/components/date-range-picker/required.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isRequired
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx
new file mode 100644
index 0000000000..f8f253caf7
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx
@@ -0,0 +1,10 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Placement start" selectorButtonPlacement="start" />
+      <DateRangePicker label="Placement end (default)" selectorButtonPlacement="end" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.ts b/apps/docs/content/components/date-range-picker/selector-button-placement.ts
index f36752737f..2d69e80fe8 100644
--- a/apps/docs/content/components/date-range-picker/selector-button-placement.ts
+++ b/apps/docs/content/components/date-range-picker/selector-button-placement.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Placement start"
-        selectorButtonPlacement="start"
-      />
-      <DateRangePicker 
-        label="Placement end (default)"
-        selectorButtonPlacement="end"
-      />
-    </div> 
-  );
-}`;
+import App from "./selector-button-placement.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx
new file mode 100644
index 0000000000..0df488b234
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx
@@ -0,0 +1,27 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export const SelectorIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      >
+        <path d="M8 2v4m8-4v4" />
+        <rect height="18" rx="2" width="18" x="3" y="4" />
+        <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Stay duration" selectorIcon={<SelectorIcon className="text-xl" />} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/selector-icon.ts b/apps/docs/content/components/date-range-picker/selector-icon.ts
index 10e4eeb89d..9997d508de 100644
--- a/apps/docs/content/components/date-range-picker/selector-icon.ts
+++ b/apps/docs/content/components/date-range-picker/selector-icon.ts
@@ -1,35 +1,7 @@
-const SelectorIcon = `export const SelectorIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8 2v4m8-4v4" />
-      <rect height="18" rx="2" width="18" x="3" y="4" />
-      <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {SelectorIcon} from './SelectorIcon';
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Stay duration"
-        selectorIcon={<SelectorIcon className="text-xl" />}
-      />
-    </div> 
-  );
-}`;
+import App from "./selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-range-picker/time-zones.raw.jsx b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx
new file mode 100644
index 0000000000..b353f82593
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx
@@ -0,0 +1,25 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        defaultValue={{
+          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
+          end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
+        }}
+        label="Stay duration"
+        labelPlacement="outside"
+      />
+      <DateRangePicker
+        defaultValue={{
+          start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
+          end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
+        }}
+        label="Stay duration"
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts
index ac08becc56..803b4ec768 100644
--- a/apps/docs/content/components/date-range-picker/time-zones.ts
+++ b/apps/docs/content/components/date-range-picker/time-zones.ts
@@ -1,28 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        defaultValue={{
-          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
-          end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
-        }}
-        label="Stay duration"
-        labelPlacement="outside"
-      />
-      <DateRangePicker
-        defaultValue={{
-          start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
-          end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
-        }}
-        label="Stay duration"
-        labelPlacement="outside"
-      />
-    </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..3e2324f44d
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx
@@ -0,0 +1,33 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let now = today(getLocalTimeZone());
+
+  let disabledRanges = [
+    [now, now.add({days: 5})],
+    [now.add({days: 14}), now.add({days: 16})],
+    [now.add({days: 23}), now.add({days: 24})],
+  ];
+
+  return (
+    <DateRangePicker
+      isDateUnavailable={(date) =>
+        disabledRanges.some(
+          (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+        )
+      }
+      label="Stay duration"
+      minValue={today(getLocalTimeZone())}
+      validate={(value) =>
+        disabledRanges.some(
+          (interval) =>
+            value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0,
+        )
+          ? "Selected date range may not include unavailable dates."
+          : null
+      }
+      validationBehavior="native"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.ts b/apps/docs/content/components/date-range-picker/unavailable-dates.ts
index c300b5fc5b..b4e1f4df1a 100644
--- a/apps/docs/content/components/date-range-picker/unavailable-dates.ts
+++ b/apps/docs/content/components/date-range-picker/unavailable-dates.ts
@@ -1,36 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let now = today(getLocalTimeZone());
-
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  return (
-    <DateRangePicker
-      label="Stay duration"
-      isDateUnavailable={(date) =>
-        disabledRanges.some(
-          (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-        )
-      }
-      minValue={today(getLocalTimeZone())}
-      validate={(value) =>
-        disabledRanges.some(
-          (interval) =>
-            value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0,
-        )
-          ? "Selected date range may not include unavailable dates."
-          : null
-      }
-      validationBehavior="native"
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/usage.raw.jsx b/apps/docs/content/components/date-range-picker/usage.raw.jsx
new file mode 100644
index 0000000000..0eacc56b4e
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return <DateRangePicker className="max-w-xs" label="Stay duration" />;
+}
diff --git a/apps/docs/content/components/date-range-picker/usage.ts b/apps/docs/content/components/date-range-picker/usage.ts
index b83666a5cb..1118304c37 100644
--- a/apps/docs/content/components/date-range-picker/usage.ts
+++ b/apps/docs/content/components/date-range-picker/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      className="max-w-xs" 
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/variants.raw.jsx b/apps/docs/content/components/date-range-picker/variants.raw.jsx
new file mode 100644
index 0000000000..5f20d0946b
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/variants.raw.jsx
@@ -0,0 +1,15 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <DateRangePicker className="max-w-xs" label="Stay duration" variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/variants.ts b/apps/docs/content/components/date-range-picker/variants.ts
index 668f9c83fe..ddea95fb2e 100644
--- a/apps/docs/content/components/date-range-picker/variants.ts
+++ b/apps/docs/content/components/date-range-picker/variants.ts
@@ -1,22 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <DateRangePicker 
-            variant={variant} 
-            label="Stay duration" 
-            className="max-w-xs" 
-          />
-        </div>
-      ))}
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/visible-month.raw.jsx b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx
new file mode 100644
index 0000000000..a45041c3da
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Stay duration" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/visible-month.ts b/apps/docs/content/components/date-range-picker/visible-month.ts
index 0f30be2412..7c3a2abe6a 100644
--- a/apps/docs/content/components/date-range-picker/visible-month.ts
+++ b/apps/docs/content/components/date-range-picker/visible-month.ts
@@ -1,15 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Stay duration"
-        visibleMonths={2}
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-month.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx
new file mode 100644
index 0000000000..3107c1c489
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateRangePicker showMonthAndYearPickers label="Birth Date" variant="bordered" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
index 5e5d03a2fd..5e5431496b 100644
--- a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
+++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
@@ -1,16 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateRangePicker
-        label="Birth Date"
-        variant="bordered"
-        showMonthAndYearPickers
-      />
-    </div>
-  );
-}`;
+import App from "./with-month-and-year-pickers.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx
new file mode 100644
index 0000000000..e988e95839
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateRangePicker
+        hideTimeZone
+        defaultValue={{
+          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
+          end: parseZonedDateTime("2024-04-08T11:15[America/Los_Angeles]"),
+        }}
+        label="Event duration"
+        visibleMonths={2}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/with-time-field.ts b/apps/docs/content/components/date-range-picker/with-time-field.ts
index 318f9f3770..8df135a004 100644
--- a/apps/docs/content/components/date-range-picker/with-time-field.ts
+++ b/apps/docs/content/components/date-range-picker/with-time-field.ts
@@ -1,21 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateRangePicker
-        label="Event duration"
-        hideTimeZone
-        visibleMonths={2}
-        defaultValue={{
-          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
-          end: parseZonedDateTime("2024-04-08T11:15[America/Los_Angeles]"),
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./with-time-field.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,