diff --git a/apps/docs/content/components/switch/colors.raw.jsx b/apps/docs/content/components/switch/colors.raw.jsx
new file mode 100644
index 0000000000..569b6eb4a6
--- /dev/null
+++ b/apps/docs/content/components/switch/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected color="default">
+        Default
+      </Switch>
+      <Switch defaultSelected color="primary">
+        Primary
+      </Switch>
+      <Switch defaultSelected color="secondary">
+        Secondary
+      </Switch>
+      <Switch defaultSelected color="success">
+        Success
+      </Switch>
+      <Switch defaultSelected color="warning">
+        Warning
+      </Switch>
+      <Switch defaultSelected color="danger">
+        Danger
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/colors.ts b/apps/docs/content/components/switch/colors.ts
index a3da415b92..d5bef810aa 100644
--- a/apps/docs/content/components/switch/colors.ts
+++ b/apps/docs/content/components/switch/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Switch defaultSelected color="default">Default</Switch>
-      <Switch defaultSelected color="primary">Primary</Switch>
-      <Switch defaultSelected color="secondary">Secondary</Switch>
-      <Switch defaultSelected color="success">Success</Switch>
-      <Switch defaultSelected color="warning">Warning</Switch>
-      <Switch defaultSelected color="danger">Danger</Switch>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/controlled.raw.jsx b/apps/docs/content/components/switch/controlled.raw.jsx
new file mode 100644
index 0000000000..2e8633b943
--- /dev/null
+++ b/apps/docs/content/components/switch/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(true);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
+        Airplane mode
+      </Switch>
+      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/controlled.ts b/apps/docs/content/components/switch/controlled.ts
index b7abbb6ae0..2c3f0cacb4 100644
--- a/apps/docs/content/components/switch/controlled.ts
+++ b/apps/docs/content/components/switch/controlled.ts
@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(true);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
-        Airplane mode
-      </Switch>  
-      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
-    </div>
-  )  
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/custom-impl.raw.jsx b/apps/docs/content/components/switch/custom-impl.raw.jsx
new file mode 100644
index 0000000000..1a3d45c059
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-impl.raw.jsx
@@ -0,0 +1,67 @@
+import {VisuallyHidden, useSwitch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+const ThemeSwitch = (props) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}
diff --git a/apps/docs/content/components/switch/custom-impl.raw.tsx b/apps/docs/content/components/switch/custom-impl.raw.tsx
new file mode 100644
index 0000000000..d2501a59c7
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-impl.raw.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+const ThemeSwitch = (props: SwitchProps) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}
diff --git a/apps/docs/content/components/switch/custom-impl.ts b/apps/docs/content/components/switch/custom-impl.ts
index 31bb02960d..ef0d8ef531 100644
--- a/apps/docs/content/components/switch/custom-impl.ts
+++ b/apps/docs/content/components/switch/custom-impl.ts
@@ -1,133 +1,12 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
-
-const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props: SwitchProps) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/MoonIcon.tsx": MoonIcon,
-  "/SunIcon.tsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/custom-styles.raw.jsx b/apps/docs/content/components/switch/custom-styles.raw.jsx
new file mode 100644
index 0000000000..db7a3568c9
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-styles.raw.jsx
@@ -0,0 +1,32 @@
+import {Switch, cn} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch
+      classNames={{
+        base: cn(
+          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
+          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        wrapper: "p-0 h-4 overflow-visible",
+        thumb: cn(
+          "w-6 h-6 border-2 shadow-lg",
+          "group-data-[hover=true]:border-primary",
+          //selected
+          "group-data-[selected=true]:ml-6",
+          // pressed
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
+        ),
+      }}
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-medium">Enable early access</p>
+        <p className="text-tiny text-default-400">
+          Get access to new features before they are released.
+        </p>
+      </div>
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts
index c4470a56e0..da3ea9093a 100644
--- a/apps/docs/content/components/switch/custom-styles.ts
+++ b/apps/docs/content/components/switch/custom-styles.ts
@@ -1,34 +1,4 @@
-const App = `import {Switch, cn} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch
-      classNames={{
-        base: cn(
-          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
-          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-        ),
-        wrapper: "p-0 h-4 overflow-visible",
-        thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]:border-primary",
-          //selected
-          "group-data-[selected=true]:ml-6",
-          // pressed
-          "group-data-[pressed=true]:w-7",
-          "group-data-[selected]:group-data-[pressed]:ml-4",
-        ),
-      }}
-    >
-      <div className="flex flex-col gap-1">
-        <p className="text-medium">Enable early access</p>
-        <p className="text-tiny text-default-400">
-          Get access to new features before they are released.
-        </p>
-      </div>
-    </Switch>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/disabled.raw.jsx b/apps/docs/content/components/switch/disabled.raw.jsx
new file mode 100644
index 0000000000..146c57ed38
--- /dev/null
+++ b/apps/docs/content/components/switch/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch defaultSelected isDisabled>
+      Automatic updates
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/disabled.ts b/apps/docs/content/components/switch/disabled.ts
index 5914c616bb..1a215cc91f 100644
--- a/apps/docs/content/components/switch/disabled.ts
+++ b/apps/docs/content/components/switch/disabled.ts
@@ -1,12 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch isDisabled defaultSelected>
-      Automatic updates
-    </Switch>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/icons.raw.jsx b/apps/docs/content/components/switch/icons.raw.jsx
new file mode 100644
index 0000000000..fbe7fe3274
--- /dev/null
+++ b/apps/docs/content/components/switch/icons.raw.jsx
@@ -0,0 +1,49 @@
+import {Switch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      color="success"
+      endContent={<MoonIcon />}
+      size="lg"
+      startContent={<SunIcon />}
+    >
+      Dark mode
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/icons.ts b/apps/docs/content/components/switch/icons.ts
index 3f3d9fcf1d..22a410c88f 100644
--- a/apps/docs/content/components/switch/icons.ts
+++ b/apps/docs/content/components/switch/icons.ts
@@ -1,59 +1,7 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-export default function App() {
-  return (
-    <Switch
-      defaultSelected
-      size="lg"
-      color="success"
-      startContent={<SunIcon />}
-      endContent={<MoonIcon />}
-    >
-      Dark mode
-    </Switch>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/label.raw.jsx b/apps/docs/content/components/switch/label.raw.jsx
new file mode 100644
index 0000000000..c349c1b537
--- /dev/null
+++ b/apps/docs/content/components/switch/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return <Switch defaultSelected>Automatic updates</Switch>;
+}
diff --git a/apps/docs/content/components/switch/label.ts b/apps/docs/content/components/switch/label.ts
index c9786705ff..254b95afb8 100644
--- a/apps/docs/content/components/switch/label.ts
+++ b/apps/docs/content/components/switch/label.ts
@@ -1,12 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch defaultSelected>
-      Automatic updates
-    </Switch>
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/sizes.raw.jsx b/apps/docs/content/components/switch/sizes.raw.jsx
new file mode 100644
index 0000000000..36dbbb9b47
--- /dev/null
+++ b/apps/docs/content/components/switch/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected size="sm">
+        Small
+      </Switch>
+      <Switch defaultSelected size="md">
+        Medium
+      </Switch>
+      <Switch defaultSelected size="lg">
+        Large
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/sizes.ts b/apps/docs/content/components/switch/sizes.ts
index 8a8b6f4f15..85a2f5b30b 100644
--- a/apps/docs/content/components/switch/sizes.ts
+++ b/apps/docs/content/components/switch/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Switch defaultSelected size="sm">Small</Switch>
-      <Switch defaultSelected size="md">Medium</Switch>
-      <Switch defaultSelected size="lg">Large</Switch>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/thumb-icon.raw.jsx b/apps/docs/content/components/switch/thumb-icon.raw.jsx
new file mode 100644
index 0000000000..3f7bea5cca
--- /dev/null
+++ b/apps/docs/content/components/switch/thumb-icon.raw.jsx
@@ -0,0 +1,50 @@
+import {Switch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const SunIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    </g>
+  </svg>
+);
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      color="secondary"
+      size="lg"
+      thumbIcon={({isSelected, className}) =>
+        isSelected ? <SunIcon className={className} /> : <MoonIcon className={className} />
+      }
+    >
+      Dark mode
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/thumb-icon.ts b/apps/docs/content/components/switch/thumb-icon.ts
index 41746fa903..4201c3f43c 100644
--- a/apps/docs/content/components/switch/thumb-icon.ts
+++ b/apps/docs/content/components/switch/thumb-icon.ts
@@ -1,64 +1,7 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-export default function App() {
-  return (
-    <Switch
-      defaultSelected
-      size="lg"
-      color="secondary"
-      thumbIcon={({ isSelected, className }) =>
-        isSelected ? (
-          <SunIcon className={className} />
-        ) : (
-          <MoonIcon className={className} />
-        )
-      }
-    >
-      Dark mode
-    </Switch>
-  );
-}`;
+import App from "./thumb-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/usage.raw.jsx b/apps/docs/content/components/switch/usage.raw.jsx
new file mode 100644
index 0000000000..434305473b
--- /dev/null
+++ b/apps/docs/content/components/switch/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return <Switch defaultSelected aria-label="Automatic updates" />;
+}
diff --git a/apps/docs/content/components/switch/usage.ts b/apps/docs/content/components/switch/usage.ts
index e76fed14c7..1118304c37 100644
--- a/apps/docs/content/components/switch/usage.ts
+++ b/apps/docs/content/components/switch/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch defaultSelected aria-label="Automatic updates"/>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index d76faa2e3d..91f0d5fe6f 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -66,7 +66,7 @@ The Switch component is used as an alternative between checked and not checked s
 
 You can also add icons to start and end of the switch by using `startContent` and `endContent` props.
 
-<CodeDemo title="With Icons" files={switchContent.icons} highlightedLines="11-12" />
+<CodeDemo title="With Icons" files={switchContent.icons} />
 
 ### Controlled