diff --git a/apps/docs/content/components/date-picker/controlled.raw.jsx b/apps/docs/content/components/date-picker/controlled.raw.jsx
new file mode 100644
index 0000000000..f831b0792d
--- /dev/null
+++ b/apps/docs/content/components/date-picker/controlled.raw.jsx
@@ -0,0 +1,30 @@
+import {DatePicker} 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(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DatePicker
+          className="max-w-[284px]"
+          label="Date (controlled)"
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+      <DatePicker
+        className="max-w-[284px]"
+        defaultValue={parseDate("2024-04-04")}
+        label="Date (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/controlled.raw.tsx b/apps/docs/content/components/date-picker/controlled.raw.tsx
new file mode 100644
index 0000000000..389bfa5323
--- /dev/null
+++ b/apps/docs/content/components/date-picker/controlled.raw.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DatePicker
+          className="max-w-[284px]"
+          label="Date (controlled)"
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+      <DatePicker
+        className="max-w-[284px]"
+        defaultValue={parseDate("2024-04-04")}
+        label="Date (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/controlled.ts b/apps/docs/content/components/date-picker/controlled.ts
index fdbcded26b..1f1a363363 100644
--- a/apps/docs/content/components/date-picker/controlled.ts
+++ b/apps/docs/content/components/date-picker/controlled.ts
@@ -1,52 +1,15 @@
-const App = `import {DatePicker} 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(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.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-picker/description.raw.jsx b/apps/docs/content/components/date-picker/description.raw.jsx
new file mode 100644
index 0000000000..ee4547c976
--- /dev/null
+++ b/apps/docs/content/components/date-picker/description.raw.jsx
@@ -0,0 +1,13 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        className="max-w-[284px]"
+        description={"This is my birth date."}
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/description.ts b/apps/docs/content/components/date-picker/description.ts
index 83fc27d071..aeb6340b6b 100644
--- a/apps/docs/content/components/date-picker/description.ts
+++ b/apps/docs/content/components/date-picker/description.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        description={"This is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/disabled.raw.jsx b/apps/docs/content/components/date-picker/disabled.raw.jsx
new file mode 100644
index 0000000000..96f50a7a62
--- /dev/null
+++ b/apps/docs/content/components/date-picker/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isDisabled className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/disabled.ts b/apps/docs/content/components/date-picker/disabled.ts
index d6c59845d6..1a215cc91f 100644
--- a/apps/docs/content/components/date-picker/disabled.ts
+++ b/apps/docs/content/components/date-picker/disabled.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isDisabled
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-picker/error-message-function.raw.jsx
new file mode 100644
index 0000000000..68272a7093
--- /dev/null
+++ b/apps/docs/content/components/date-picker/error-message-function.raw.jsx
@@ -0,0 +1,18 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/error-message-function.ts b/apps/docs/content/components/date-picker/error-message-function.ts
index 2b473c9f5d..1af0006141 100644
--- a/apps/docs/content/components/date-picker/error-message-function.ts
+++ b/apps/docs/content/components/date-picker/error-message-function.ts
@@ -1,21 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/error-message.raw.jsx b/apps/docs/content/components/date-picker/error-message.raw.jsx
new file mode 100644
index 0000000000..b367b03746
--- /dev/null
+++ b/apps/docs/content/components/date-picker/error-message.raw.jsx
@@ -0,0 +1,14 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage="Please enter a valid date."
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/error-message.ts b/apps/docs/content/components/date-picker/error-message.ts
index d1c85629ae..fb8101b132 100644
--- a/apps/docs/content/components/date-picker/error-message.ts
+++ b/apps/docs/content/components/date-picker/error-message.ts
@@ -1,17 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage="Please enter a valid date."
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/granularity.raw.jsx b/apps/docs/content/components/date-picker/granularity.raw.jsx
new file mode 100644
index 0000000000..b1edba5b99
--- /dev/null
+++ b/apps/docs/content/components/date-picker/granularity.raw.jsx
@@ -0,0 +1,32 @@
+import {DatePicker} from "@nextui-org/react";
+import {now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/granularity.raw.tsx b/apps/docs/content/components/date-picker/granularity.raw.tsx
new file mode 100644
index 0000000000..47db9bc44e
--- /dev/null
+++ b/apps/docs/content/components/date-picker/granularity.raw.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-picker/international-calendar.raw.jsx
new file mode 100644
index 0000000000..02f132c4fd
--- /dev/null
+++ b/apps/docs/content/components/date-picker/international-calendar.raw.jsx
@@ -0,0 +1,22 @@
+import {DatePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-picker/international-calendar.raw.tsx
new file mode 100644
index 0000000000..8b9e570dd8
--- /dev/null
+++ b/apps/docs/content/components/date-picker/international-calendar.raw.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/international-calendar.ts b/apps/docs/content/components/date-picker/international-calendar.ts
index ba86ec20fd..a8707fd093 100644
--- a/apps/docs/content/components/date-picker/international-calendar.ts
+++ b/apps/docs/content/components/date-picker/international-calendar.ts
@@ -1,54 +1,15 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DatePicker
-          showMonthAndYearPickers
-          variant="bordered"
-          className="max-w-md"
-          label="Appointment date"
-          value={date}
-          onChange={setDate}
-        />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DatePicker
-          showMonthAndYearPickers
-          variant="bordered"
-          className="max-w-md"
-          label="Appointment date"
-          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-picker/label-placements.raw.jsx b/apps/docs/content/components/date-picker/label-placements.raw.jsx
new file mode 100644
index 0000000000..551c5d6a00
--- /dev/null
+++ b/apps/docs/content/components/date-picker/label-placements.raw.jsx
@@ -0,0 +1,23 @@
+import {DatePicker} 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">
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <DatePicker
+              key={placement}
+              className="max-w-[284px]"
+              description={placement}
+              label={"Birth date"}
+              labelPlacement={placement}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/label-placements.ts b/apps/docs/content/components/date-picker/label-placements.ts
index abd21541dd..cd2a65d352 100644
--- a/apps/docs/content/components/date-picker/label-placements.ts
+++ b/apps/docs/content/components/date-picker/label-placements.ts
@@ -1,29 +1,4 @@
-const App = `import {DatePicker} 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">
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <DatePicker 
-              label={"Birth date"} 
-              className="max-w-[284px]"
-              description={placement}
-              labelPlacement={placement}
-            />
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..06f92bb8f1
--- /dev/null
+++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -0,0 +1,25 @@
+import {DatePicker} from "@nextui-org/react";
+import {getLocalTimeZone, 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>
+        <DatePicker
+          defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-1">
+        <h3>Max date</h3>
+        <DatePicker
+          defaultValue={today(getLocalTimeZone()).add({days: 1})}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.ts b/apps/docs/content/components/date-picker/min-and-max-date.ts
index bdd9992138..be9af0fc43 100644
--- a/apps/docs/content/components/date-picker/min-and-max-date.ts
+++ b/apps/docs/content/components/date-picker/min-and-max-date.ts
@@ -1,28 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {getLocalTimeZone, 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>
-        <DatePicker
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).subtract({ days: 1 })}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-1">
-        <h3>Max date</h3>
-        <DatePicker
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).add({ days: 1 })}
-        />
-      </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-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-picker/page-behavior.raw.jsx
new file mode 100644
index 0000000000..5c5833cd1f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/page-behavior.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Birth date" pageBehavior="single" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/page-behavior.ts b/apps/docs/content/components/date-picker/page-behavior.ts
index dda732673a..70c2ebfd2f 100644
--- a/apps/docs/content/components/date-picker/page-behavior.ts
+++ b/apps/docs/content/components/date-picker/page-behavior.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        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-picker/preset.raw.jsx b/apps/docs/content/components/date-picker/preset.raw.jsx
new file mode 100644
index 0000000000..d93f2e6a32
--- /dev/null
+++ b/apps/docs/content/components/date-picker/preset.raw.jsx
@@ -0,0 +1,92 @@
+import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+
+  const [value, setValue] = React.useState(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(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">
+      <DatePicker
+        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-[380px] overflow-x-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(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value,
+          onFocusChange: setValue,
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/preset.raw.tsx b/apps/docs/content/components/date-picker/preset.raw.tsx
new file mode 100644
index 0000000000..de9dd853d6
--- /dev/null
+++ b/apps/docs/content/components/date-picker/preset.raw.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {
+  DateValue,
+  startOfWeek,
+  startOfMonth,
+  getLocalTimeZone,
+  today,
+} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+
+  const [value, setValue] = React.useState<DateValue>(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(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">
+      <DatePicker
+        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-[380px] overflow-x-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(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value,
+          onFocusChange: setValue,
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/preset.ts b/apps/docs/content/components/date-picker/preset.ts
index 884ffbd063..ae3ac37b4f 100644
--- a/apps/docs/content/components/date-picker/preset.ts
+++ b/apps/docs/content/components/date-picker/preset.ts
@@ -1,194 +1,15 @@
-const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
-import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-
-  const [value, setValue] = React.useState(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(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">
-      <DatePicker
-        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-[380px] overflow-x-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(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value,
-          onFocusChange: setValue,
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-      </p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
-import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-
-  const [value, setValue] = React.useState<DateValue>(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(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">
-      <DatePicker
-        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-[380px] overflow-x-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(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value,
-          onFocusChange: setValue,
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./preset.raw.jsx?raw";
+import AppTs from "./preset.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-picker/readonly.raw.jsx b/apps/docs/content/components/date-picker/readonly.raw.jsx
new file mode 100644
index 0000000000..26698bb916
--- /dev/null
+++ b/apps/docs/content/components/date-picker/readonly.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isReadOnly className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/readonly.ts b/apps/docs/content/components/date-picker/readonly.ts
index 35ac2d8809..fabd05ba36 100644
--- a/apps/docs/content/components/date-picker/readonly.ts
+++ b/apps/docs/content/components/date-picker/readonly.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isReadOnly
-        />
-    </div>
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/required.raw.jsx b/apps/docs/content/components/date-picker/required.raw.jsx
new file mode 100644
index 0000000000..745bc44be6
--- /dev/null
+++ b/apps/docs/content/components/date-picker/required.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isRequired className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/required.ts b/apps/docs/content/components/date-picker/required.ts
index c5746bef43..b50b781e6f 100644
--- a/apps/docs/content/components/date-picker/required.ts
+++ b/apps/docs/content/components/date-picker/required.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isRequired
-        />
-    </div>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx
new file mode 100644
index 0000000000..20372e750f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx
@@ -0,0 +1,10 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Placement start" selectorButtonPlacement="start" />
+      <DatePicker label="Placement end (default)" selectorButtonPlacement="end" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/selector-button-placement.ts b/apps/docs/content/components/date-picker/selector-button-placement.ts
index 923d92384d..2d69e80fe8 100644
--- a/apps/docs/content/components/date-picker/selector-button-placement.ts
+++ b/apps/docs/content/components/date-picker/selector-button-placement.ts
@@ -1,19 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Placement start"
-        selectorButtonPlacement="start"
-      />
-      <DatePicker 
-        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-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-picker/selector-icon.raw.jsx
new file mode 100644
index 0000000000..87c2819f91
--- /dev/null
+++ b/apps/docs/content/components/date-picker/selector-icon.raw.jsx
@@ -0,0 +1,27 @@
+import {DatePicker} from "@nextui-org/react";
+
+export const SelectorIcon = () => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em">
+      <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">
+      <DatePicker label="Birth date" selectorIcon={<SelectorIcon />} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/selector-icon.ts b/apps/docs/content/components/date-picker/selector-icon.ts
index b7fd8509eb..9997d508de 100644
--- a/apps/docs/content/components/date-picker/selector-icon.ts
+++ b/apps/docs/content/components/date-picker/selector-icon.ts
@@ -1,36 +1,7 @@
-const SelectorIcon = `export const SelectorIcon = () => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em">
-    <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 {DatePicker} 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">
-      <DatePicker 
-        label="Birth date"
-        selectorIcon={<SelectorIcon />}
-      />
-    </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-picker/time-zones.raw.jsx b/apps/docs/content/components/date-picker/time-zones.raw.jsx
new file mode 100644
index 0000000000..f2986331dd
--- /dev/null
+++ b/apps/docs/content/components/date-picker/time-zones.raw.jsx
@@ -0,0 +1,21 @@
+import {DatePicker} 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">
+      <DatePicker
+        className="max-w-xs"
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label="Zoned Date Time"
+        labelPlacement="outside"
+      />
+      <DatePicker
+        className="max-w-xs"
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        label="Zoned Date Time"
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/time-zones.ts b/apps/docs/content/components/date-picker/time-zones.ts
index 85c1d3c554..803b4ec768 100644
--- a/apps/docs/content/components/date-picker/time-zones.ts
+++ b/apps/docs/content/components/date-picker/time-zones.ts
@@ -1,24 +1,4 @@
-const App = `import {DatePicker} 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">
-      <DatePicker
-        label="Zoned Date Time"
-        className="max-w-xs"
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        labelPlacement="outside"
-      />
-      <DatePicker
-        label="Zoned Date Time"
-        className="max-w-xs"
-        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-        labelPlacement="outside"
-      />
-  </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..fc8e72798e
--- /dev/null
+++ b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx
@@ -0,0 +1,30 @@
+import {DatePicker} from "@nextui-org/react";
+import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+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})],
+  ];
+
+  let {locale} = useLocale();
+
+  let isDateUnavailable = (date) =>
+    isWeekend(date, locale) ||
+    disabledRanges.some(
+      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+    );
+
+  return (
+    <DatePicker
+      aria-label="Appointment date"
+      isDateUnavailable={isDateUnavailable}
+      label="Appointment date"
+      minValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-picker/unavailable-dates.ts b/apps/docs/content/components/date-picker/unavailable-dates.ts
index 93e0606772..b4e1f4df1a 100644
--- a/apps/docs/content/components/date-picker/unavailable-dates.ts
+++ b/apps/docs/content/components/date-picker/unavailable-dates.ts
@@ -1,33 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-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})],
-  ];
-
-  let {locale} = useLocale();
-
-  let isDateUnavailable = (date) =>
-    isWeekend(date, locale) ||
-    disabledRanges.some(
-      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-    );
-
-  return (
-    <DatePicker
-      label="Appointment date"
-      aria-label="Appointment date"
-      isDateUnavailable={isDateUnavailable}
-      minValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/usage.raw.jsx b/apps/docs/content/components/date-picker/usage.raw.jsx
new file mode 100644
index 0000000000..d007f1291a
--- /dev/null
+++ b/apps/docs/content/components/date-picker/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return <DatePicker className="max-w-[284px]" label="Birth date" />;
+}
diff --git a/apps/docs/content/components/date-picker/usage.ts b/apps/docs/content/components/date-picker/usage.ts
index 2f3a5d5ca4..1118304c37 100644
--- a/apps/docs/content/components/date-picker/usage.ts
+++ b/apps/docs/content/components/date-picker/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DatePicker label="Birth date" className="max-w-[284px]" />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/variants.raw.jsx b/apps/docs/content/components/date-picker/variants.raw.jsx
new file mode 100644
index 0000000000..8111333b5a
--- /dev/null
+++ b/apps/docs/content/components/date-picker/variants.raw.jsx
@@ -0,0 +1,15 @@
+import {DatePicker} 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">
+          <DatePicker label={"Birth date"} variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/variants.ts b/apps/docs/content/components/date-picker/variants.ts
index b31ec23aeb..ddea95fb2e 100644
--- a/apps/docs/content/components/date-picker/variants.ts
+++ b/apps/docs/content/components/date-picker/variants.ts
@@ -1,18 +1,4 @@
-const App = `import {DatePicker} 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">
-          <DatePicker label={"Birth date"} variant={variant} />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/visible-month.raw.jsx b/apps/docs/content/components/date-picker/visible-month.raw.jsx
new file mode 100644
index 0000000000..0143d03c4f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/visible-month.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Birth date" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/visible-month.ts b/apps/docs/content/components/date-picker/visible-month.ts
index 2e9f01b039..7c3a2abe6a 100644
--- a/apps/docs/content/components/date-picker/visible-month.ts
+++ b/apps/docs/content/components/date-picker/visible-month.ts
@@ -1,15 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        visibleMonths={2}
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-month.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx
new file mode 100644
index 0000000000..5047a454ea
--- /dev/null
+++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DatePicker showMonthAndYearPickers label="Birth Date" variant="bordered" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
index eeb8ae32a1..5e5431496b 100644
--- a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
+++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DatePicker
-        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-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-picker/with-time-field.raw.jsx
new file mode 100644
index 0000000000..b6784d7ca8
--- /dev/null
+++ b/apps/docs/content/components/date-picker/with-time-field.raw.jsx
@@ -0,0 +1,16 @@
+import {DatePicker} from "@nextui-org/react";
+import {now, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DatePicker
+        hideTimeZone
+        showMonthAndYearPickers
+        defaultValue={now(getLocalTimeZone())}
+        label="Event Date"
+        variant="bordered"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/with-time-field.ts b/apps/docs/content/components/date-picker/with-time-field.ts
index 54d597e371..8df135a004 100644
--- a/apps/docs/content/components/date-picker/with-time-field.ts
+++ b/apps/docs/content/components/date-picker/with-time-field.ts
@@ -1,19 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DatePicker
-        label="Event Date"
-        variant="bordered"
-        hideTimeZone
-        showMonthAndYearPickers
-        defaultValue={now(getLocalTimeZone())}
-      />
-    </div>
-  );
-}`;
+import App from "./with-time-field.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,