diff --git a/apps/docs/content/components/input/clear-button.raw.jsx b/apps/docs/content/components/input/clear-button.raw.jsx
new file mode 100644
index 0000000000..c2fea3d79b
--- /dev/null
+++ b/apps/docs/content/components/input/clear-button.raw.jsx
@@ -0,0 +1,17 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isClearable
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      placeholder="Enter your email"
+      type="email"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("input cleared")}
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/clear-button.ts b/apps/docs/content/components/input/clear-button.ts
index 892ea1dd45..f84fe2f74e 100644
--- a/apps/docs/content/components/input/clear-button.ts
+++ b/apps/docs/content/components/input/clear-button.ts
@@ -1,19 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isClearable
-      type="email"
-      label="Email"
-      variant="bordered"
-      placeholder="Enter your email"
-      defaultValue="junior@nextui.org"
-      onClear={() => console.log("input cleared")}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./clear-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/colors.raw.jsx b/apps/docs/content/components/input/colors.raw.jsx
new file mode 100644
index 0000000000..f1dd7e6e5b
--- /dev/null
+++ b/apps/docs/content/components/input/colors.raw.jsx
@@ -0,0 +1,21 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Input
+          key={color}
+          className="max-w-[220px]"
+          color={color}
+          defaultValue="junior@nextui.org"
+          label="Email"
+          placeholder="Enter your email"
+          type="email"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/colors.ts b/apps/docs/content/components/input/colors.ts
index 40885df2c1..d5bef810aa 100644
--- a/apps/docs/content/components/input/colors.ts
+++ b/apps/docs/content/components/input/colors.ts
@@ -1,31 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Input
-          key={color}
-          type="email"
-          color={color}
-          label="Email"
-          placeholder="Enter your email"
-          defaultValue="junior@nextui.org"
-          className="max-w-[220px]"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/controlled.raw.jsx b/apps/docs/content/components/input/controlled.raw.jsx
new file mode 100644
index 0000000000..7cb97a37be
--- /dev/null
+++ b/apps/docs/content/components/input/controlled.raw.jsx
@@ -0,0 +1,12 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <Input label="Email" placeholder="Enter your email" value={value} onValueChange={setValue} />
+      <p className="text-default-500 text-small">Input value: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/controlled.ts b/apps/docs/content/components/input/controlled.ts
index 7c923292b9..2c3f0cacb4 100644
--- a/apps/docs/content/components/input/controlled.ts
+++ b/apps/docs/content/components/input/controlled.ts
@@ -1,20 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <div className="w-full flex flex-col gap-2 max-w-[240px]">
-      <Input
-        label="Email"
-        placeholder="Enter your email"
-        value={value}
-        onValueChange={setValue}
-      />
-      <p className="text-default-500 text-small">Input value: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/custom-impl.raw.jsx b/apps/docs/content/components/input/custom-impl.raw.jsx
new file mode 100644
index 0000000000..9a75192076
--- /dev/null
+++ b/apps/docs/content/components/input/custom-impl.raw.jsx
@@ -0,0 +1,162 @@
+import React, {forwardRef} from "react";
+import {useInput} from "@nextui-org/react";
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const CloseFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const styles = {
+  label: "text-black/50 dark:text-white/90",
+  input: [
+    "bg-transparent",
+    "text-black/90 dark:text-white/90",
+    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
+  ],
+  innerWrapper: "bg-transparent",
+  inputWrapper: [
+    "shadow-xl",
+    "bg-default-200/50",
+    "dark:bg-default/60",
+    "backdrop-blur-xl",
+    "backdrop-saturate-200",
+    "hover:bg-default-200/70",
+    "focus-within:!bg-default-200/50",
+    "dark:hover:bg-default/70",
+    "dark:focus-within:!bg-default/60",
+    "!cursor-text",
+  ],
+};
+
+const MyInput = forwardRef((props, ref) => {
+  const {
+    Component,
+    label,
+    domRef,
+    description,
+    isClearable,
+    startContent,
+    endContent,
+    shouldLabelBeOutside,
+    shouldLabelBeInside,
+    errorMessage,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getInnerWrapperProps,
+    getInputWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps,
+  } = useInput({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    label: "Search",
+    type: "search",
+    placeholder: "Type to search...",
+    startContent: (
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+    ),
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const labelContent = <label {...getLabelProps()}>{label}</label>;
+
+  const end = React.useMemo(() => {
+    if (isClearable) {
+      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
+    }
+
+    return endContent;
+  }, [isClearable, getClearButtonProps]);
+
+  const innerWrapper = React.useMemo(() => {
+    if (startContent || end) {
+      return (
+        <div {...getInnerWrapperProps()}>
+          {startContent}
+          <input {...getInputProps()} />
+          {end}
+        </div>
+      );
+    }
+
+    return <input {...getInputProps()} />;
+  }, [startContent, end, getInputProps, getInnerWrapperProps]);
+
+  return (
+    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <Component {...getBaseProps()}>
+        {shouldLabelBeOutside ? labelContent : null}
+        <div
+          tabIndex={0}
+          {...getInputWrapperProps()}
+          role="button"
+          onClick={() => {
+            domRef.current?.focus();
+          }}
+          onKeyDown={() => {
+            domRef.current?.focus();
+          }}
+        >
+          {shouldLabelBeInside ? labelContent : null}
+          {innerWrapper}
+        </div>
+        {description && <div {...getDescriptionProps()}>{description}</div>}
+        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+      </Component>
+    </div>
+  );
+});
+
+MyInput.displayName = "MyInput";
+
+export default MyInput;
diff --git a/apps/docs/content/components/input/custom-impl.ts b/apps/docs/content/components/input/custom-impl.ts
index 8fb99cecdb..ab37512cec 100644
--- a/apps/docs/content/components/input/custom-impl.ts
+++ b/apps/docs/content/components/input/custom-impl.ts
@@ -1,164 +1,7 @@
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const CloseFilledIcon = `export const CloseFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import React, {forwardRef} from "react";
-import {useInput} from "@nextui-org/react";
-import {SearchIcon} from "./SearchIcon";
-import {CloseFilledIcon} from "./CloseFilledIcon";
-
-const styles = {
-  label: "text-black/50 dark:text-white/90",
-  input: [
-    "bg-transparent",
-    "text-black/90 dark:text-white/90",
-    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
-  ],
-  innerWrapper: "bg-transparent",
-  inputWrapper: [
-    "shadow-xl",
-    "bg-default-200/50",
-    "dark:bg-default/60",
-    "backdrop-blur-xl",
-    "backdrop-saturate-200",
-    "hover:bg-default-200/70",
-    "focus-within:!bg-default-200/50",
-    "dark:hover:bg-default/70",
-    "dark:focus-within:!bg-default/60",
-    "!cursor-text",
-  ],
-};
-
-const MyInput = forwardRef((props, ref) => {
-  const {
-    Component,
-    label,
-    domRef,
-    description,
-    isClearable,
-    startContent,
-    endContent,
-    shouldLabelBeOutside,
-    shouldLabelBeInside,
-    errorMessage,
-    getBaseProps,
-    getLabelProps,
-    getInputProps,
-    getInnerWrapperProps,
-    getInputWrapperProps,
-    getDescriptionProps,
-    getErrorMessageProps,
-    getClearButtonProps,
-  } = useInput({
-    ...props,
-    ref,
-    // this is just for the example, the props bellow should be passed by the parent component
-    label: "Search",
-    type: "search",
-    placeholder: "Type to search...",
-    startContent: (
-      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
-    ),
-    // custom styles
-    classNames: {
-      ...styles,
-    },
-  });
-
-  const labelContent = <label {...getLabelProps()}>{label}</label>;
-
-  const end = React.useMemo(() => {
-    if (isClearable) {
-      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
-    }
-
-    return endContent;
-  }, [isClearable, getClearButtonProps]);
-
-  const innerWrapper = React.useMemo(() => {
-    if (startContent || end) {
-      return (
-        <div {...getInnerWrapperProps()}>
-          {startContent}
-          <input {...getInputProps()} />
-          {end}
-        </div>
-      );
-    }
-
-    return <input {...getInputProps()} />;
-  }, [startContent, end, getInputProps, getInnerWrapperProps]);
-
-  return (
-    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      <Component {...getBaseProps()}>
-        {shouldLabelBeOutside ? labelContent : null}
-        <div
-          {...getInputWrapperProps()}
-          role="button"
-          onClick={() => {
-            domRef.current?.focus();
-          }}
-        >
-          {shouldLabelBeInside ? labelContent : null}
-          {innerWrapper}
-        </div>
-        {description && <div {...getDescriptionProps()}>{description}</div>}
-        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
-      </Component>
-    </div>
-  );
-});
-
-MyInput.displayName = "MyInput";
-
-export default MyInput;`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SearchIcon.jsx": SearchIcon,
-  "/CloseFilledIcon.jsx": CloseFilledIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/custom-styles.raw.jsx b/apps/docs/content/components/input/custom-styles.raw.jsx
new file mode 100644
index 0000000000..98c11c99bb
--- /dev/null
+++ b/apps/docs/content/components/input/custom-styles.raw.jsx
@@ -0,0 +1,68 @@
+import {Input} from "@nextui-org/react";
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <Input
+        isClearable
+        classNames={{
+          label: "text-black/50 dark:text-white/90",
+          input: [
+            "bg-transparent",
+            "text-black/90 dark:text-white/90",
+            "placeholder:text-default-700/50 dark:placeholder:text-white/60",
+          ],
+          innerWrapper: "bg-transparent",
+          inputWrapper: [
+            "shadow-xl",
+            "bg-default-200/50",
+            "dark:bg-default/60",
+            "backdrop-blur-xl",
+            "backdrop-saturate-200",
+            "hover:bg-default-200/70",
+            "dark:hover:bg-default/70",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
+            "!cursor-text",
+          ],
+        }}
+        label="Search"
+        placeholder="Type to search..."
+        radius="lg"
+        startContent={
+          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+        }
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
index 3908b17561..da3ea9093a 100644
--- a/apps/docs/content/components/input/custom-styles.ts
+++ b/apps/docs/content/components/input/custom-styles.ts
@@ -1,74 +1,7 @@
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {SearchIcon} from "./SearchIcon";
-
-export default function App() {
-  return (
-    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      <Input
-        label="Search"
-        isClearable
-        radius="lg"
-        classNames={{
-          label: "text-black/50 dark:text-white/90",
-          input: [
-            "bg-transparent",
-            "text-black/90 dark:text-white/90",
-            "placeholder:text-default-700/50 dark:placeholder:text-white/60",
-          ],
-          innerWrapper: "bg-transparent",
-          inputWrapper: [
-            "shadow-xl",
-            "bg-default-200/50",
-            "dark:bg-default/60",
-            "backdrop-blur-xl",
-            "backdrop-saturate-200",
-            "hover:bg-default-200/70",
-            "dark:hover:bg-default/70",
-            "group-data-[focus=true]:bg-default-200/50",
-            "dark:group-data-[focus=true]:bg-default/60",
-            "!cursor-text",
-          ],
-        }}
-        placeholder="Type to search..."
-        startContent={
-          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
-        }
-      />
-    </div>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SearchIcon.jsx": SearchIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/description.raw.jsx b/apps/docs/content/components/input/description.raw.jsx
new file mode 100644
index 0000000000..3362ef3dcd
--- /dev/null
+++ b/apps/docs/content/components/input/description.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      description="We'll never share your email with anyone else."
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/description.ts b/apps/docs/content/components/input/description.ts
index 8a286b3692..aeb6340b6b 100644
--- a/apps/docs/content/components/input/description.ts
+++ b/apps/docs/content/components/input/description.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      description="We'll never share your email with anyone else."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/disabled.raw.jsx b/apps/docs/content/components/input/disabled.raw.jsx
new file mode 100644
index 0000000000..6ed57cee8d
--- /dev/null
+++ b/apps/docs/content/components/input/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isDisabled
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/disabled.ts b/apps/docs/content/components/input/disabled.ts
index f3122337c3..1a215cc91f 100644
--- a/apps/docs/content/components/input/disabled.ts
+++ b/apps/docs/content/components/input/disabled.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isDisabled
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/error-message.raw.jsx b/apps/docs/content/components/input/error-message.raw.jsx
new file mode 100644
index 0000000000..d8f0f19f5c
--- /dev/null
+++ b/apps/docs/content/components/input/error-message.raw.jsx
@@ -0,0 +1,15 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      className="max-w-xs"
+      defaultValue="junior2nextui.org"
+      errorMessage="Please enter a valid email"
+      isInvalid={true}
+      label="Email"
+      type="email"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/error-message.ts b/apps/docs/content/components/input/error-message.ts
index 8ed295e659..fb8101b132 100644
--- a/apps/docs/content/components/input/error-message.ts
+++ b/apps/docs/content/components/input/error-message.ts
@@ -1,18 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      type="email"
-      label="Email"
-      variant="bordered"
-      defaultValue="junior2nextui.org"
-      isInvalid={true}
-      errorMessage="Please enter a valid email"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/label-placements.raw.jsx b/apps/docs/content/components/input/label-placements.raw.jsx
new file mode 100644
index 0000000000..01c6692667
--- /dev/null
+++ b/apps/docs/content/components/input/label-placements.raw.jsx
@@ -0,0 +1,39 @@
+import {Input} 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">
+        <h3 className="text-default-500 text-small">Without placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Input
+              key={placement}
+              description={placement}
+              label="Email"
+              labelPlacement={placement}
+              type="email"
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">With placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Input
+              key={placement}
+              description={placement}
+              label="Email"
+              labelPlacement={placement}
+              placeholder="Enter your email"
+              type="email"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts
index f37fc6cf78..cd2a65d352 100644
--- a/apps/docs/content/components/input/label-placements.ts
+++ b/apps/docs/content/components/input/label-placements.ts
@@ -1,46 +1,4 @@
-const App = `import {Input} 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">
-        <h3 className="text-default-500 text-small">Without placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Input
-              key={placement}
-              type="email"
-              label="Email"
-              labelPlacement={placement}
-              description={placement}
-            />
-          ))}
-        </div>
-      </div>  
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">With placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Input
-              key={placement}
-              type="email"
-              label="Email"
-              labelPlacement={placement}
-              placeholder="Enter your email"
-              description={placement}
-            />
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx
new file mode 100644
index 0000000000..e8aa0025cd
--- /dev/null
+++ b/apps/docs/content/components/input/password.raw.jsx
@@ -0,0 +1,91 @@
+import {Input} from "@nextui-org/react";
+
+export const EyeSlashFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EyeFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  return (
+    <Input
+      className="max-w-xs"
+      endContent={
+        <button
+          aria-label="toggle password visibility"
+          className="focus:outline-none"
+          type="button"
+          onClick={toggleVisibility}
+        >
+          {isVisible ? (
+            <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+          ) : (
+            <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+          )}
+        </button>
+      }
+      label="Password"
+      placeholder="Enter your password"
+      type={isVisible ? "text" : "password"}
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts
index 02822deb75..7751eaf935 100644
--- a/apps/docs/content/components/input/password.ts
+++ b/apps/docs/content/components/input/password.ts
@@ -1,92 +1,7 @@
-const EyeSlashFilledIcon = `export const EyeSlashFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z"
-      fill="currentColor"
-    />
-    <path
-      d="M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z"
-      fill="currentColor"
-    />
-    <path
-      d="M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EyeFilledIcon = `export const EyeFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {EyeFilledIcon} from "./EyeFilledIcon";
-import {EyeSlashFilledIcon} from "./EyeSlashFilledIcon";
-
-export default function App() {
-  const [isVisible, setIsVisible] = React.useState(false);
-
-  const toggleVisibility = () => setIsVisible(!isVisible);
-
-  return (
-    <Input
-      label="Password"
-      variant="bordered"
-      placeholder="Enter your password"
-      endContent={
-        <button className="focus:outline-none" type="button" onClick={toggleVisibility} aria-label="toggle password visibility">
-          {isVisible ? (
-            <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-          ) : (
-            <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-          )}
-        </button>
-      }
-      type={isVisible ? "text" : "password"}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./password.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/EyeSlashFilledIcon.jsx": EyeSlashFilledIcon,
-  "/EyeFilledIcon.jsx": EyeFilledIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/radius.raw.jsx b/apps/docs/content/components/input/radius.raw.jsx
new file mode 100644
index 0000000000..cf85ff22f2
--- /dev/null
+++ b/apps/docs/content/components/input/radius.raw.jsx
@@ -0,0 +1,21 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {radius.map((r) => (
+        <Input
+          key={r}
+          className="max-w-[220px]"
+          defaultValue="junior@nextui.org"
+          label="Email"
+          placeholder="Enter your email"
+          radius={r}
+          type="email"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/radius.ts b/apps/docs/content/components/input/radius.ts
index 13eaba44b0..7b78db1ce0 100644
--- a/apps/docs/content/components/input/radius.ts
+++ b/apps/docs/content/components/input/radius.ts
@@ -1,30 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {radius.map((r) => (
-        <Input
-          key={r}
-          radius={r}
-          type="email"
-          label="Email"
-          placeholder="Enter your email"
-          defaultValue="junior@nextui.org"
-          className="max-w-[220px]"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/readonly.raw.jsx b/apps/docs/content/components/input/readonly.raw.jsx
new file mode 100644
index 0000000000..50cb471ded
--- /dev/null
+++ b/apps/docs/content/components/input/readonly.raw.jsx
@@ -0,0 +1,14 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isReadOnly
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/readonly.ts b/apps/docs/content/components/input/readonly.ts
index 7e9bf99da4..fabd05ba36 100644
--- a/apps/docs/content/components/input/readonly.ts
+++ b/apps/docs/content/components/input/readonly.ts
@@ -1,17 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isReadOnly
-      type="email"
-      label="Email"
-      variant="bordered"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/regex-validation.raw.jsx b/apps/docs/content/components/input/regex-validation.raw.jsx
new file mode 100644
index 0000000000..64e06b69c7
--- /dev/null
+++ b/apps/docs/content/components/input/regex-validation.raw.jsx
@@ -0,0 +1,27 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("junior2nextui.org");
+
+  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
+
+  const isInvalid = React.useMemo(() => {
+    if (value === "") return false;
+
+    return validateEmail(value) ? false : true;
+  }, [value]);
+
+  return (
+    <Input
+      className="max-w-xs"
+      color={isInvalid ? "danger" : "success"}
+      errorMessage="Please enter a valid email"
+      isInvalid={isInvalid}
+      label="Email"
+      type="email"
+      value={value}
+      variant="bordered"
+      onValueChange={setValue}
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/regex-validation.ts b/apps/docs/content/components/input/regex-validation.ts
index 1eb62d8e2b..395d689b17 100644
--- a/apps/docs/content/components/input/regex-validation.ts
+++ b/apps/docs/content/components/input/regex-validation.ts
@@ -1,30 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("junior2nextui.org");
-
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
-
-  const isInvalid = React.useMemo(() => {
-    if (value === "") return false;
-
-    return validateEmail(value) ? false : true;
-  }, [value]);
-
-  return (
-    <Input
-      value={value}
-      type="email"
-      label="Email"
-      variant="bordered"
-      isInvalid={isInvalid}
-      color={isInvalid ? "danger" : "success"}
-      errorMessage="Please enter a valid email"
-      onValueChange={setValue}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./regex-validation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/required.raw.jsx b/apps/docs/content/components/input/required.raw.jsx
new file mode 100644
index 0000000000..6e97f4494b
--- /dev/null
+++ b/apps/docs/content/components/input/required.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isRequired
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/required.ts b/apps/docs/content/components/input/required.ts
index 2af84c5b46..b50b781e6f 100644
--- a/apps/docs/content/components/input/required.ts
+++ b/apps/docs/content/components/input/required.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isRequired
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/sizes.raw.jsx b/apps/docs/content/components/input/sizes.raw.jsx
new file mode 100644
index 0000000000..01e44c76d4
--- /dev/null
+++ b/apps/docs/content/components/input/sizes.raw.jsx
@@ -0,0 +1,16 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Input label="Email" size={size} type="email" />
+          <Input label="Email" placeholder="Enter your email" size={size} type="email" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/sizes.ts b/apps/docs/content/components/input/sizes.ts
index 6294e756c7..85a2f5b30b 100644
--- a/apps/docs/content/components/input/sizes.ts
+++ b/apps/docs/content/components/input/sizes.ts
@@ -1,20 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {sizes.map((size) => (
-        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Input size={size} type="email" label="Email" />
-          <Input size={size} type="email" label="Email" placeholder="Enter your email" />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx
new file mode 100644
index 0000000000..306c4f70b0
--- /dev/null
+++ b/apps/docs/content/components/input/start-end-content.raw.jsx
@@ -0,0 +1,152 @@
+import {Input} from "@nextui-org/react";
+
+export const MailIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          label="Email"
+          labelPlacement="outside"
+          placeholder="you@example.com"
+          startContent={
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          type="email"
+        />
+        <Input
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          type="number"
+        />
+        <Input
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui.org"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">https://</span>
+            </div>
+          }
+          type="url"
+        />
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          endContent={
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          label="Email"
+          labelPlacement="outside"
+          placeholder="you@example.com"
+          type="email"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          type="number"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">.org/</span>
+            </div>
+          }
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui"
+          type="url"
+        />
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">@gmail.com</span>
+            </div>
+          }
+          label="Email"
+          labelPlacement="outside"
+          placeholder="nextui"
+          startContent={
+            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+        />
+        <Input
+          endContent={
+            <div className="flex items-center">
+              <label className="sr-only" htmlFor="currency">
+                Currency
+              </label>
+              <select
+                className="outline-none border-0 bg-transparent text-default-400 text-small"
+                id="currency"
+                name="currency"
+              >
+                <option>USD</option>
+                <option>ARS</option>
+                <option>EUR</option>
+              </select>
+            </div>
+          }
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          type="number"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">.org</span>
+            </div>
+          }
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">https://</span>
+            </div>
+          }
+          type="url"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/start-end-content.ts b/apps/docs/content/components/input/start-end-content.ts
index 767530eb9d..e99c7e5997 100644
--- a/apps/docs/content/components/input/start-end-content.ts
+++ b/apps/docs/content/components/input/start-end-content.ts
@@ -1,158 +1,7 @@
-const MailIcon = `export const MailIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {MailIcon} from './MailIcon';
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          type="email"
-          label="Email"
-          placeholder="you@example.com"
-          labelPlacement="outside"
-          startContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <Input
-          type="number"
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui.org"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">https://</span>
-            </div>
-          }
-        />
-      </div>
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          type="email"
-          label="Email"
-          placeholder="you@example.com"
-          labelPlacement="outside"
-          endContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <Input
-          type="number"
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui"
-          labelPlacement="outside"
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">.org/</span>
-            </div>
-          }
-        />
-      </div>
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          label="Email"
-          placeholder="nextui"
-          labelPlacement="outside"
-          startContent={
-            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">@gmail.com</span>
-            </div>
-          }
-        />
-        <Input
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-          endContent={
-            <div className="flex items-center">
-              <label className="sr-only" htmlFor="currency">
-                Currency
-              </label>
-              <select
-                className="outline-none border-0 bg-transparent text-default-400 text-small"
-                id="currency"
-                name="currency"
-              >
-                <option>USD</option>
-                <option>ARS</option>
-                <option>EUR</option>
-              </select>
-            </div>
-          }
-          type="number"
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">https://</span>
-            </div>
-          }
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">.org</span>
-            </div>
-          }
-        />
-      </div>
-    </div>  
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": MailIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/usage.raw.jsx b/apps/docs/content/components/input/usage.raw.jsx
new file mode 100644
index 0000000000..3b7f143b55
--- /dev/null
+++ b/apps/docs/content/components/input/usage.raw.jsx
@@ -0,0 +1,10 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Input label="Email" type="email" />
+      <Input label="Email" placeholder="Enter your email" type="email" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/usage.ts b/apps/docs/content/components/input/usage.ts
index e2896cf877..1118304c37 100644
--- a/apps/docs/content/components/input/usage.ts
+++ b/apps/docs/content/components/input/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Input type="email" label="Email" />
-      <Input type="email" label="Email" placeholder="Enter your email" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/variants.raw.jsx b/apps/docs/content/components/input/variants.raw.jsx
new file mode 100644
index 0000000000..bfe66708dc
--- /dev/null
+++ b/apps/docs/content/components/input/variants.raw.jsx
@@ -0,0 +1,16 @@
+import {Input} 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">
+          <Input label="Email" type="email" variant={variant} />
+          <Input label="Email" placeholder="Enter your email" type="email" variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/variants.ts b/apps/docs/content/components/input/variants.ts
index d8308fd586..ddea95fb2e 100644
--- a/apps/docs/content/components/input/variants.ts
+++ b/apps/docs/content/components/input/variants.ts
@@ -1,19 +1,4 @@
-const App = `import {Input} 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">
-          <Input type="email" variant={variant} label="Email" />
-          <Input type="email" variant={variant} label="Email" placeholder="Enter your email" />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,