diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx
new file mode 100644
index 0000000000..edce75b871
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx
@@ -0,0 +1,16 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
+
+  return (
+    <Calendar
+      aria-label="Date (Controlled Focused Value)"
+      focusedValue={focusedDate}
+      value={defaultDate}
+      onFocusChange={setFocusedDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx
new file mode 100644
index 0000000000..00f2666b84
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx
@@ -0,0 +1,19 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);
+
+  return (
+    <Calendar
+      aria-label="Date (Controlled Focused Value)"
+      focusedValue={focusedDate}
+      value={defaultDate}
+      onFocusChange={setFocusedDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/controlled-focused-value.ts b/apps/docs/content/components/calendar/controlled-focused-value.ts
index a405da5060..100bf01c43 100644
--- a/apps/docs/content/components/calendar/controlled-focused-value.ts
+++ b/apps/docs/content/components/calendar/controlled-focused-value.ts
@@ -1,43 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
-
-  return (
-    <Calendar
-      aria-label="Date (Controlled Focused Value)"
-      focusedValue={focusedDate}
-      value={defaultDate}
-      onFocusChange={setFocusedDate}
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);
-
-  return (
-    <Calendar
-      aria-label="Date (Controlled Focused Value)"
-      focusedValue={focusedDate}
-      value={defaultDate}
-      onFocusChange={setFocusedDate}
-    />
-  );
-}`;
+import App from "./controlled-focused-value.raw.jsx?raw";
+import AppTs from "./controlled-focused-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/controlled.raw.jsx b/apps/docs/content/components/calendar/controlled.raw.jsx
new file mode 100644
index 0000000000..54d418f9f8
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled.raw.jsx
@@ -0,0 +1,8 @@
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState(parseDate("2024-03-07"));
+
+  return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/calendar/controlled.raw.tsx b/apps/docs/content/components/calendar/controlled.raw.tsx
new file mode 100644
index 0000000000..80c8b2dd2f
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled.raw.tsx
@@ -0,0 +1,11 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));
+
+  return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/calendar/controlled.ts b/apps/docs/content/components/calendar/controlled.ts
index 4a1166231c..1f1a363363 100644
--- a/apps/docs/content/components/calendar/controlled.ts
+++ b/apps/docs/content/components/calendar/controlled.ts
@@ -1,39 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState(parseDate("2024-03-07"));
-
-  return (
-    <Calendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));
-
-  return (
-    <Calendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
+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/calendar/disabled.raw.jsx b/apps/docs/content/components/calendar/disabled.raw.jsx
new file mode 100644
index 0000000000..1d08bd6492
--- /dev/null
+++ b/apps/docs/content/components/calendar/disabled.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar isDisabled aria-label="Date (Disabled)" />;
+}
diff --git a/apps/docs/content/components/calendar/disabled.ts b/apps/docs/content/components/calendar/disabled.ts
index d82f742067..1a215cc91f 100644
--- a/apps/docs/content/components/calendar/disabled.ts
+++ b/apps/docs/content/components/calendar/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar aria-label="Date (Disabled)" isDisabled />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/international-calendars.raw.jsx b/apps/docs/content/components/calendar/international-calendars.raw.jsx
new file mode 100644
index 0000000000..22d4a824ab
--- /dev/null
+++ b/apps/docs/content/components/calendar/international-calendars.raw.jsx
@@ -0,0 +1,10 @@
+import {Calendar} from "@nextui-org/react";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  return (
+    <I18nProvider locale="zh-CN-u-ca-chinese">
+      <Calendar aria-label="Date (International Calendar)" />
+    </I18nProvider>
+  );
+}
diff --git a/apps/docs/content/components/calendar/international-calendars.ts b/apps/docs/content/components/calendar/international-calendars.ts
index bda32d3a4a..98bb8449e6 100644
--- a/apps/docs/content/components/calendar/international-calendars.ts
+++ b/apps/docs/content/components/calendar/international-calendars.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  return (
-    <I18nProvider locale="zh-CN-u-ca-chinese">
-      <Calendar aria-label="Date (International Calendar)" />
-    </I18nProvider>
-  );
-}`;
+import App from "./international-calendars.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/invalid-date.raw.jsx b/apps/docs/content/components/calendar/invalid-date.raw.jsx
new file mode 100644
index 0000000000..372034725b
--- /dev/null
+++ b/apps/docs/content/components/calendar/invalid-date.raw.jsx
@@ -0,0 +1,19 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState(today(getLocalTimeZone()));
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date, locale);
+
+  return (
+    <Calendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/invalid-date.raw.tsx b/apps/docs/content/components/calendar/invalid-date.raw.tsx
new file mode 100644
index 0000000000..d9276c52e6
--- /dev/null
+++ b/apps/docs/content/components/calendar/invalid-date.raw.tsx
@@ -0,0 +1,22 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date, locale);
+
+  return (
+    <Calendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/invalid-date.ts b/apps/docs/content/components/calendar/invalid-date.ts
index 6a8354c74c..e373a04e5b 100644
--- a/apps/docs/content/components/calendar/invalid-date.ts
+++ b/apps/docs/content/components/calendar/invalid-date.ts
@@ -1,51 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState(today(getLocalTimeZone()));
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
-
-  return (
-    <Calendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
-
-  return (
-    <Calendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
+import App from "./invalid-date.raw.jsx?raw";
+import AppTs from "./invalid-date.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/max-date-value.raw.jsx b/apps/docs/content/components/calendar/max-date-value.raw.jsx
new file mode 100644
index 0000000000..3edacc1909
--- /dev/null
+++ b/apps/docs/content/components/calendar/max-date-value.raw.jsx
@@ -0,0 +1,12 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <Calendar
+      aria-label="Date (Max Date Value)"
+      defaultValue={today(getLocalTimeZone())}
+      maxValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/max-date-value.ts b/apps/docs/content/components/calendar/max-date-value.ts
index 9c60a5e910..6a82913361 100644
--- a/apps/docs/content/components/calendar/max-date-value.ts
+++ b/apps/docs/content/components/calendar/max-date-value.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar
-      aria-label="Date (Max Date Value)"
-      defaultValue={today(getLocalTimeZone())}
-      maxValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./max-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/min-date-value.raw.jsx b/apps/docs/content/components/calendar/min-date-value.raw.jsx
new file mode 100644
index 0000000000..c7d7ab70b1
--- /dev/null
+++ b/apps/docs/content/components/calendar/min-date-value.raw.jsx
@@ -0,0 +1,12 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <Calendar
+      aria-label="Date (Min Date Value)"
+      defaultValue={today(getLocalTimeZone())}
+      minValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/min-date-value.ts b/apps/docs/content/components/calendar/min-date-value.ts
index 9ddbabbdb7..4e86e82613 100644
--- a/apps/docs/content/components/calendar/min-date-value.ts
+++ b/apps/docs/content/components/calendar/min-date-value.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar
-      aria-label="Date (Min Date Value)"
-      defaultValue={today(getLocalTimeZone())}
-      minValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./min-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/page-behaviour.raw.jsx b/apps/docs/content/components/calendar/page-behaviour.raw.jsx
new file mode 100644
index 0000000000..e28c53f652
--- /dev/null
+++ b/apps/docs/content/components/calendar/page-behaviour.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar aria-label="Date (Page Behaviour)" pageBehavior="single" />;
+}
diff --git a/apps/docs/content/components/calendar/page-behaviour.ts b/apps/docs/content/components/calendar/page-behaviour.ts
index cd4fd33d27..ef31c845d8 100644
--- a/apps/docs/content/components/calendar/page-behaviour.ts
+++ b/apps/docs/content/components/calendar/page-behaviour.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Page Behaviour)" 
-      pageBehavior="single" 
-    />
-  );
-}`;
+import App from "./page-behaviour.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/presets.raw.jsx b/apps/docs/content/components/calendar/presets.raw.jsx
new file mode 100644
index 0000000000..bf703ff297
--- /dev/null
+++ b/apps/docs/content/components/calendar/presets.raw.jsx
@@ -0,0 +1,87 @@
+import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [value, setValue] = React.useState(defaultDate);
+  let {locale} = useLocale();
+
+  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">
+      <Calendar
+        aria-label="Date (Presets)"
+        bottomContent={
+          <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-[280px] 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>
+        }
+        classNames={{
+          content: "w-full",
+        }}
+        focusedValue={value}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <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>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/presets.raw.tsx b/apps/docs/content/components/calendar/presets.raw.tsx
new file mode 100644
index 0000000000..496f8e37b3
--- /dev/null
+++ b/apps/docs/content/components/calendar/presets.raw.tsx
@@ -0,0 +1,90 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [value, setValue] = React.useState<DateValue>(defaultDate);
+  let {locale} = useLocale();
+
+  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">
+      <Calendar
+        aria-label="Date (Presets)"
+        bottomContent={
+          <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-[280px] 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>
+        }
+        classNames={{
+          content: "w-full",
+        }}
+        focusedValue={value}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <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>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/presets.ts b/apps/docs/content/components/calendar/presets.ts
index f6e9d85919..334d59a763 100644
--- a/apps/docs/content/components/calendar/presets.ts
+++ b/apps/docs/content/components/calendar/presets.ts
@@ -1,185 +1,15 @@
-const App = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [value, setValue] = React.useState(defaultDate);
-  let {locale} = useLocale();
-
-  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">
-      <Calendar
-        aria-label="Date (Presets)"
-        bottomContent={
-          <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-[280px] 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>
-        }
-        classNames={{
-          content: "w-full",
-        }}
-        focusedValue={value}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <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>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setValue}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [value, setValue] = React.useState<DateValue>(defaultDate);
-  let {locale} = useLocale();
-
-  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">
-      <Calendar
-        aria-label="Date (Presets)"
-        bottomContent={
-          <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-[280px] 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>
-        }
-        classNames={{
-          content: "w-full",
-        }}
-        focusedValue={value}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <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>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setValue}
-      />
-    </div>
-  );
-}`;
+import App from "./presets.raw.jsx?raw";
+import AppTs from "./presets.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/read-only.raw.jsx b/apps/docs/content/components/calendar/read-only.raw.jsx
new file mode 100644
index 0000000000..ff58e4fbb8
--- /dev/null
+++ b/apps/docs/content/components/calendar/read-only.raw.jsx
@@ -0,0 +1,6 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return <Calendar isReadOnly aria-label="Date (Read Only)" value={today(getLocalTimeZone())} />;
+}
diff --git a/apps/docs/content/components/calendar/read-only.ts b/apps/docs/content/components/calendar/read-only.ts
index 6fffcd20a6..caf4be10cf 100644
--- a/apps/docs/content/components/calendar/read-only.ts
+++ b/apps/docs/content/components/calendar/read-only.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Read Only)" 
-      value={today(getLocalTimeZone())} 
-      isReadOnly 
-    />
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..b08a78b9da
--- /dev/null
+++ b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx
@@ -0,0 +1,23 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} 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 <Calendar aria-label="Date (Unavailable)" isDateUnavailable={isDateUnavailable} />;
+}
diff --git a/apps/docs/content/components/calendar/unavailable-dates.ts b/apps/docs/content/components/calendar/unavailable-dates.ts
index 9a884fb2a9..b4e1f4df1a 100644
--- a/apps/docs/content/components/calendar/unavailable-dates.ts
+++ b/apps/docs/content/components/calendar/unavailable-dates.ts
@@ -1,32 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} 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 (
-    <Calendar
-      aria-label="Date (Unavailable)"
-      isDateUnavailable={isDateUnavailable} 
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/usage.raw.jsx b/apps/docs/content/components/calendar/usage.raw.jsx
new file mode 100644
index 0000000000..5d2d03dd0b
--- /dev/null
+++ b/apps/docs/content/components/calendar/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex gap-x-4">
+      <Calendar aria-label="Date (No Selection)" />
+      <Calendar aria-label="Date (Uncontrolled)" defaultValue={parseDate("2020-02-03")} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/usage.ts b/apps/docs/content/components/calendar/usage.ts
index 0a97b863cd..1118304c37 100644
--- a/apps/docs/content/components/calendar/usage.ts
+++ b/apps/docs/content/components/calendar/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {parseDate} from '@internationalized/date';
-
-export default function App() {
-  return (
-    <div className="flex gap-x-4">
-      <Calendar aria-label="Date (No Selection)" />
-      <Calendar aria-label="Date (Uncontrolled)" defaultValue={parseDate("2020-02-03")} />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/visible-months.raw.jsx b/apps/docs/content/components/calendar/visible-months.raw.jsx
new file mode 100644
index 0000000000..bf0c6aff77
--- /dev/null
+++ b/apps/docs/content/components/calendar/visible-months.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar aria-label="Date (Visible Month)" visibleMonths={3} />;
+}
diff --git a/apps/docs/content/components/calendar/visible-months.ts b/apps/docs/content/components/calendar/visible-months.ts
index 796fc6d9b8..38c2db8f01 100644
--- a/apps/docs/content/components/calendar/visible-months.ts
+++ b/apps/docs/content/components/calendar/visible-months.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Visible Month)" 
-      visibleMonths={3} 
-    />
-  );
-}`;
+import App from "./visible-months.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx
new file mode 100644
index 0000000000..a6a3c56866
--- /dev/null
+++ b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar showMonthAndYearPickers aria-label="Date (Show Month and Year Picker)" />;
+}
diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.ts b/apps/docs/content/components/calendar/with-month-and-year-picker.ts
index 1774984501..53df2d1367 100644
--- a/apps/docs/content/components/calendar/with-month-and-year-picker.ts
+++ b/apps/docs/content/components/calendar/with-month-and-year-picker.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Show Month and Year Picker)" 
-      showMonthAndYearPickers 
-    />
-  );
-}`;
+import App from "./with-month-and-year-picker.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,