diff --git a/apps/docs/content/components/textarea/autosize.raw.jsx b/apps/docs/content/components/textarea/autosize.raw.jsx
new file mode 100644
index 0000000000..0addb39d70
--- /dev/null
+++ b/apps/docs/content/components/textarea/autosize.raw.jsx
@@ -0,0 +1,11 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+      <Textarea label="Description" placeholder="Enter your description (Default autosize)" />
+      <Textarea label="Description" minRows={2} placeholder="Enter your description (Min rows 2)" />
+      <Textarea label="Description" maxRows={3} placeholder="Enter your description (Max rows 3)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/autosize.ts b/apps/docs/content/components/textarea/autosize.ts
index 55cb2402bd..b82782913b 100644
--- a/apps/docs/content/components/textarea/autosize.ts
+++ b/apps/docs/content/components/textarea/autosize.ts
@@ -1,25 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description (Default autosize)"
-      />
-      <Textarea
-        minRows={2}
-        label="Description"
-        placeholder="Enter your description (Min rows 2)"
-      />
-      <Textarea
-        maxRows={3}
-        label="Description"
-        placeholder="Enter your description (Max rows 3)"
-      />
-    </div>
-  );
-}`;
+import App from "./autosize.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/controlled.raw.jsx b/apps/docs/content/components/textarea/controlled.raw.jsx
new file mode 100644
index 0000000000..13dba52da4
--- /dev/null
+++ b/apps/docs/content/components/textarea/controlled.raw.jsx
@@ -0,0 +1,19 @@
+import {Textarea} 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]">
+      <Textarea
+        label="Description"
+        labelPlacement="outside"
+        placeholder="Enter your description"
+        value={value}
+        variant="underlined"
+        onValueChange={setValue}
+      />
+      <p className="text-default-500 text-small">Textarea value: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/controlled.ts b/apps/docs/content/components/textarea/controlled.ts
index de68816041..2c3f0cacb4 100644
--- a/apps/docs/content/components/textarea/controlled.ts
+++ b/apps/docs/content/components/textarea/controlled.ts
@@ -1,22 +1,4 @@
-const App = `import {Textarea} 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]">
-      <Textarea
-        variant="underlined"
-        label="Description"
-        labelPlacement="outside"
-        placeholder="Enter your description"
-        value={value}
-        onValueChange={setValue}
-      />
-      <p className="text-default-500 text-small">Textarea value: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/description.raw.jsx b/apps/docs/content/components/textarea/description.raw.jsx
new file mode 100644
index 0000000000..5db51b7747
--- /dev/null
+++ b/apps/docs/content/components/textarea/description.raw.jsx
@@ -0,0 +1,13 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      className="max-w-xs"
+      description="Enter a concise description of your project."
+      label="Description"
+      placeholder="Enter your description"
+      variant="faded"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/description.ts b/apps/docs/content/components/textarea/description.ts
index 2b37dda9e5..aeb6340b6b 100644
--- a/apps/docs/content/components/textarea/description.ts
+++ b/apps/docs/content/components/textarea/description.ts
@@ -1,16 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      variant="faded"
-      label="Description"
-      placeholder="Enter your description"
-      description="Enter a concise description of your project."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/disable-autosize.raw.jsx b/apps/docs/content/components/textarea/disable-autosize.raw.jsx
new file mode 100644
index 0000000000..78ddc14711
--- /dev/null
+++ b/apps/docs/content/components/textarea/disable-autosize.raw.jsx
@@ -0,0 +1,17 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      disableAnimation
+      disableAutosize
+      classNames={{
+        base: "max-w-xs",
+        input: "resize-y min-h-[40px]",
+      }}
+      label="Description"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/disable-autosize.ts b/apps/docs/content/components/textarea/disable-autosize.ts
index df63cc1165..5e50200f22 100644
--- a/apps/docs/content/components/textarea/disable-autosize.ts
+++ b/apps/docs/content/components/textarea/disable-autosize.ts
@@ -1,20 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      label="Description"
-      variant="bordered"
-      placeholder="Enter your description"
-      disableAnimation
-      disableAutosize
-      classNames={{
-        base: "max-w-xs",
-        input: "resize-y min-h-[40px]",
-      }}
-    />
-  );
-}`;
+import App from "./disable-autosize.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/disabled.raw.jsx b/apps/docs/content/components/textarea/disabled.raw.jsx
new file mode 100644
index 0000000000..832a627c1e
--- /dev/null
+++ b/apps/docs/content/components/textarea/disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isDisabled
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/disabled.ts b/apps/docs/content/components/textarea/disabled.ts
index 182b7b5ef0..1a215cc91f 100644
--- a/apps/docs/content/components/textarea/disabled.ts
+++ b/apps/docs/content/components/textarea/disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isDisabled
-      label="Description"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/error-message.raw.jsx b/apps/docs/content/components/textarea/error-message.raw.jsx
new file mode 100644
index 0000000000..3a1c8f29bd
--- /dev/null
+++ b/apps/docs/content/components/textarea/error-message.raw.jsx
@@ -0,0 +1,15 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library with..."
+      errorMessage="The description should be at least 255 characters long."
+      isInvalid={true}
+      label="Description"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/error-message.ts b/apps/docs/content/components/textarea/error-message.ts
index 8a32c04ab9..fb8101b132 100644
--- a/apps/docs/content/components/textarea/error-message.ts
+++ b/apps/docs/content/components/textarea/error-message.ts
@@ -1,18 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isInvalid={true}
-      variant="bordered"
-      label="Description"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library with..."
-      errorMessage="The description should be at least 255 characters long."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/readonly.raw.jsx b/apps/docs/content/components/textarea/readonly.raw.jsx
new file mode 100644
index 0000000000..eb2e4d947e
--- /dev/null
+++ b/apps/docs/content/components/textarea/readonly.raw.jsx
@@ -0,0 +1,15 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isReadOnly
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/readonly.ts b/apps/docs/content/components/textarea/readonly.ts
index 1d66b78874..fabd05ba36 100644
--- a/apps/docs/content/components/textarea/readonly.ts
+++ b/apps/docs/content/components/textarea/readonly.ts
@@ -1,18 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isReadOnly
-      label="Description"
-      variant="bordered"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/required.raw.jsx b/apps/docs/content/components/textarea/required.raw.jsx
new file mode 100644
index 0000000000..f07a31d38b
--- /dev/null
+++ b/apps/docs/content/components/textarea/required.raw.jsx
@@ -0,0 +1,13 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isRequired
+      className="max-w-xs"
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/required.ts b/apps/docs/content/components/textarea/required.ts
index 01126e7fef..b50b781e6f 100644
--- a/apps/docs/content/components/textarea/required.ts
+++ b/apps/docs/content/components/textarea/required.ts
@@ -1,16 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isRequired
-      label="Description"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/usage.raw.jsx b/apps/docs/content/components/textarea/usage.raw.jsx
new file mode 100644
index 0000000000..bb911f295b
--- /dev/null
+++ b/apps/docs/content/components/textarea/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return <Textarea className="max-w-xs" label="Description" placeholder="Enter your description" />;
+}
diff --git a/apps/docs/content/components/textarea/usage.ts b/apps/docs/content/components/textarea/usage.ts
index 53720f0660..1118304c37 100644
--- a/apps/docs/content/components/textarea/usage.ts
+++ b/apps/docs/content/components/textarea/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      label="Description"
-      placeholder="Enter your description"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/variants.raw.jsx b/apps/docs/content/components/textarea/variants.raw.jsx
new file mode 100644
index 0000000000..4128e5976a
--- /dev/null
+++ b/apps/docs/content/components/textarea/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "faded", "bordered", "underlined"];
+
+  return (
+    <div className="w-full grid grid-cols-12 gap-4">
+      {variants.map((variant) => (
+        <Textarea
+          key={variant}
+          className="col-span-12 md:col-span-6 mb-6 md:mb-0"
+          label="Description"
+          labelPlacement="outside"
+          placeholder="Enter your description"
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/variants.ts b/apps/docs/content/components/textarea/variants.ts
index d20e30b3fa..ddea95fb2e 100644
--- a/apps/docs/content/components/textarea/variants.ts
+++ b/apps/docs/content/components/textarea/variants.ts
@@ -1,23 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "faded", "bordered", "underlined"];
-
-  return (
-    <div className="w-full grid grid-cols-12 gap-4">
-      {variants.map((variant) => (
-        <Textarea
-          key={variant}
-          variant={variant}
-          label="Description"
-          labelPlacement="outside"
-          placeholder="Enter your description"
-          className="col-span-12 md:col-span-6 mb-6 md:mb-0"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,