diff --git a/apps/docs/content/components/alert/colors.raw.jsx b/apps/docs/content/components/alert/colors.raw.jsx
new file mode 100644
index 0000000000..a4d123eae5
--- /dev/null
+++ b/apps/docs/content/components/alert/colors.raw.jsx
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <div className="flex flex-col w-full">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <div key={color} className="w-full flex items-center my-3">
+            <Alert color={color} title={`This is a ${color} alert`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index 8e88d2ef12..d5bef810aa 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -1,21 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center justify-center w-full">
-      <div className="flex flex-col w-full">
-        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-          <div key={color} className="w-full flex items-center my-3">
-            <Alert 
-              color={color} 
-              title={\`This is a \${color} alert\`}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/controlled.raw.jsx b/apps/docs/content/components/alert/controlled.raw.jsx
new file mode 100644
index 0000000000..59444db376
--- /dev/null
+++ b/apps/docs/content/components/alert/controlled.raw.jsx
@@ -0,0 +1,28 @@
+import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  const title = "Success Notification";
+  const description =
+    "Your action has been completed successfully. We'll notify you when updates are available.";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {isVisible ? (
+        <Alert
+          color="success"
+          description={description}
+          isVisible={isVisible}
+          title={title}
+          variant="faded"
+          onClose={() => setIsVisible(false)}
+        />
+      ) : (
+        <Button variant="bordered" onPress={() => setIsVisible(true)}>
+          Show Alert
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/controlled.ts b/apps/docs/content/components/alert/controlled.ts
index 33af02947f..2c3f0cacb4 100644
--- a/apps/docs/content/components/alert/controlled.ts
+++ b/apps/docs/content/components/alert/controlled.ts
@@ -1,33 +1,4 @@
-const App = `import {Alert, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isVisible, setIsVisible] = React.useState(true);
-
-  const title = "Success Notification";
-  const description = "Your action has been completed successfully. We'll notify you when updates are available.";
-
-  return (
-    <div className="flex flex-col gap-4">
-      {isVisible ? (
-        <Alert 
-          title={title}
-          description={description}
-          isVisible={isVisible} 
-          variant="faded"
-          color="success"
-          onClose={() => setIsVisible(false)}
-        />
-      ) : (
-        <Button 
-          variant="bordered" 
-          onPress={() => setIsVisible(true)}
-        >
-          Show Alert
-        </Button>
-      )}
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/custom-impl.raw.jsx b/apps/docs/content/components/alert/custom-impl.raw.jsx
new file mode 100644
index 0000000000..a541c7481d
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-impl.raw.jsx
@@ -0,0 +1,124 @@
+import React, {forwardRef, useMemo} from "react";
+import {useAlert} from "@nextui-org/react";
+
+export const InfoCircleIcon = (props) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
+
+export const CloseIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+};
+
+const styles = {
+  base: [
+    "bg-slate-100",
+    "border",
+    "shadow",
+    "hover:bg-slate-200",
+    "focus-within:!bg-slate-100",
+    "dark:bg-slate-900",
+    "dark:hover:bg-slate-800",
+    "dark:border-slate-800",
+    "dark:focus-within:!bg-slate-900",
+    "cursor-pointer",
+  ],
+  title: ["text-base", "text-slate-500", "font-bold"],
+  description: ["text-base", "text-slate-500"],
+};
+
+const MyAlert = forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getAlertIconProps,
+  } = useAlert({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    title: "Email Sent!!",
+    description: "You will get a reply soon",
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const mainWrapper = useMemo(() => {
+    return (
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const baseWrapper = useMemo(() => {
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <InfoCircleIcon {...getAlertIconProps()} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+    onClose,
+    getAlertIconProps,
+  ]);
+
+  return <>{baseWrapper}</>;
+});
+
+MyAlert.displayName = "MyAlert";
+
+export default MyAlert;
diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index 9f5a2c70a2..ab37512cec 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -1,140 +1,7 @@
-const InfoCircleIcon = `export const InfoCircleIcon = (props) => (
-  <svg
-    fill="none"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
-    />
-  </svg>
-);`;
-
-const CloseIcon = `export const CloseIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={2}
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M18 6L6 18M6 6l12 12" />
-  </svg>
-);`;
-
-const App = `import React, {forwardRef, useMemo} from "react";
-import {useAlert} from "@nextui-org/react";
-import {InfoCircleIcon} from "./InfoCircleIcon";
-import {CloseIcon} from "./CloseIcon"
-
-const styles = {
-  base: [
-    "bg-slate-100",
-    "border",
-    "shadow",
-    "hover:bg-slate-200",
-    "focus-within:!bg-slate-100",
-    "dark:bg-slate-900",
-    "dark:hover:bg-slate-800",
-    "dark:border-slate-800",
-    "dark:focus-within:!bg-slate-900",
-    "cursor-pointer"
-  ],
-  title: [
-    "text-base",
-    "text-slate-500",
-    "font-bold"
-  ],
-  description: [
-    "text-base",
-    "text-slate-500",
-  ],
-}
-
-const MyAlert = forwardRef((props, ref) => {
-  const {
-    title,
-    description,
-    isClosable,
-    domRef,
-    handleClose,
-    getBaseProps,
-    getMainWrapperProps,
-    getDescriptionProps,
-    getTitleProps,
-    getCloseButtonProps,
-    color,
-    isVisible,
-    onClose,
-    getCloseIconProps,
-    getAlertIconProps,
-  } = useAlert({
-      ...props,
-      ref,
-      // this is just for the example, the props bellow should be passed by the parent component
-      title: "Email Sent!!",
-      description: "You will get a reply soon",
-      // custom styles
-      classNames: {
-        ...styles,
-      },
-    });
-
-  const mainWrapper = useMemo(() => {
-    return (
-      <div {...getMainWrapperProps()}>
-        {title && <div {...getTitleProps()}>{title}</div>}
-        <div {...getDescriptionProps()}>{description}</div>
-      </div>
-    );
-  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
-
-  const baseWrapper = useMemo(() => {
-    return isVisible ? (
-      <div ref={domRef} {...getBaseProps()}>
-        <InfoCircleIcon {...getAlertIconProps()} />
-        {mainWrapper}
-        {(isClosable || onClose) && (
-          <button onClick={handleClose} {...getCloseButtonProps()}>
-            <CloseIcon />
-          </button>
-        )}
-      </div>
-    ) : null;
-  }, [
-    mainWrapper,
-    isClosable,
-    getCloseButtonProps,
-    isVisible,
-    domRef,
-    getBaseProps,
-    handleClose,
-    color,
-    onClose,
-    getAlertIconProps,
-  ]);
-
-  return <>{baseWrapper}</>;
-});
-
-MyAlert.displayName = "MyAlert";
-
-export default MyAlert;`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/InfoCircleIcon": InfoCircleIcon,
-  "/CloseIcon": CloseIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/alert/custom-styles.raw.jsx b/apps/docs/content/components/alert/custom-styles.raw.jsx
new file mode 100644
index 0000000000..8291720ae1
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.raw.jsx
@@ -0,0 +1,91 @@
+import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/custom-styles.raw.tsx b/apps/docs/content/components/alert/custom-styles.raw.tsx
new file mode 100644
index 0000000000..9056bf91c8
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.raw.tsx
@@ -0,0 +1,94 @@
+import type {AlertProps} from "@nextui-org/react";
+
+import React from "react";
+import {Alert, Button, cn} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames?.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames?.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
index 437c8f35ee..29cf5fd0ee 100644
--- a/apps/docs/content/components/alert/custom-styles.ts
+++ b/apps/docs/content/components/alert/custom-styles.ts
@@ -1,192 +1,15 @@
-const AppTs = `import {Alert, Button} from "@nextui-org/react";
-
-const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
-  (
-    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
-    ref,
-  ) => {
-    const colorClass = React.useMemo(() => {
-      switch (color) {
-        case "default":
-          return "before:bg-default-300";
-        case "primary":
-          return "before:bg-primary";
-        case "secondary":
-          return "before:bg-secondary";
-        case "success":
-          return "before:bg-success";
-        case "warning":
-          return "before:bg-warning";
-        case "danger":
-          return "before:bg-danger";
-        default:
-          return "before:bg-default-200";
-      }
-    }, []);
-
-    return (
-      <Alert
-        ref={ref}
-        classNames={{
-          ...classNames,
-          base: cn(
-            [
-              "bg-default-50 dark:bg-background shadow-sm",
-              "border-1 border-default-200 dark:border-default-100",
-              "relative before:content-[''] before:absolute before:z-10",
-              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
-              "rounded-l-none border-l-0",
-              colorClass,
-            ],
-            classNames?.base,
-            className,
-          ),
-          mainWrapper: cn("pt-1", classNames?.mainWrapper),
-          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
-        }}
-        color={color}
-        title={title}
-        variant={variant}
-        {...props}
-      >
-        {children}
-      </Alert>
-    );
-  },
-);
-
-CustomAlert.displayName = "CustomAlert";
-
-export default function App() {
-  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-  return (
-    <div className="flex flex-col w-full gap-y-6">
-      {colors.map((color) => (
-        <CustomAlert
-          key={color}
-          color={color}
-          title="The documents you requested are ready to be viewed"
-        >
-          <div className="flex items-center gap-1 mt-3">
-            <Button
-              className="bg-background text-default-700 font-medium border-1 shadow-small"
-              size="sm"
-              variant="bordered"
-            >
-              View documents
-            </Button>
-            <Button
-              className="text-default-500 font-medium underline underline-offset-4"
-              size="sm"
-              variant="light"
-            >
-              Maybe later
-            </Button>
-          </div>
-        </CustomAlert>
-      ))}
-    </div>
-  );
-}`;
-
-const App = `import {Alert, Button} from "@nextui-org/react";
-
-const CustomAlert = React.forwardRef(
-  (
-    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
-    ref,
-  ) => {
-    const colorClass = React.useMemo(() => {
-      switch (color) {
-        case "default":
-          return "before:bg-default-300";
-        case "primary":
-          return "before:bg-primary";
-        case "secondary":
-          return "before:bg-secondary";
-        case "success":
-          return "before:bg-success";
-        case "warning":
-          return "before:bg-warning";
-        case "danger":
-          return "before:bg-danger";
-        default:
-          return "before:bg-default-200";
-      }
-    }, []);
-
-    return (
-      <Alert
-        ref={ref}
-        classNames={{
-          ...classNames,
-          base: cn(
-            [
-              "bg-default-50 dark:bg-background shadow-sm",
-              "border-1 border-default-200 dark:border-default-100",
-              "relative before:content-[''] before:absolute before:z-10",
-              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
-              "rounded-l-none border-l-0",
-              colorClass,
-            ],
-            classNames.base,
-            className,
-          ),
-          mainWrapper: cn("pt-1", classNames.mainWrapper),
-          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
-        }}
-        color={color}
-        title={title}
-        variant={variant}
-        {...props}
-      >
-        {children}
-      </Alert>
-    );
-  },
-);
-
-CustomAlert.displayName = "CustomAlert";
-
-export default function App() {
-  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-  return (
-    <div className="flex flex-col w-full gap-y-6">
-      {colors.map((color) => (
-        <CustomAlert
-          key={color}
-          color={color}
-          title="The documents you requested are ready to be viewed"
-        >
-          <div className="flex items-center gap-1 mt-3">
-            <Button
-              className="bg-background text-default-700 font-medium border-1 shadow-small"
-              size="sm"
-              variant="bordered"
-            >
-              View documents
-            </Button>
-            <Button
-              className="text-default-500 font-medium underline underline-offset-4"
-              size="sm"
-              variant="light"
-            >
-              Maybe later
-            </Button>
-          </div>
-        </CustomAlert>
-      ))}
-    </div>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
+import AppTs from "./custom-styles.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/alert/radius.raw.jsx b/apps/docs/content/components/alert/radius.raw.jsx
new file mode 100644
index 0000000000..07b2f9c5a8
--- /dev/null
+++ b/apps/docs/content/components/alert/radius.raw.jsx
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <div className="flex flex-col w-full">
+        {["none", "sm", "md", "lg", "full"].map((radius) => (
+          <div key={radius} className="w-full flex items-center my-3">
+            <Alert radius={radius} title={`This is a ${radius} radius alert`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index abbf3f5f52..7b78db1ce0 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -1,21 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center justify-center w-full">
-      <div className="flex flex-col w-full">
-        {["none", "sm", "md", "lg", "full"].map((radius) => (
-          <div key={radius} className="w-full flex items-center my-3">
-            <Alert 
-              radius={radius} 
-              title={\`This is a \${radius} radius alert\`}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/usage.raw.jsx b/apps/docs/content/components/alert/usage.raw.jsx
new file mode 100644
index 0000000000..3b5a727e9b
--- /dev/null
+++ b/apps/docs/content/components/alert/usage.raw.jsx
@@ -0,0 +1,12 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "This is an alert";
+  const description = "Thanks for subscribing to our newsletter!";
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert description={description} title={title} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
index 6543526891..1118304c37 100644
--- a/apps/docs/content/components/alert/usage.ts
+++ b/apps/docs/content/components/alert/usage.ts
@@ -1,15 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  const title = "This is an alert";
-  const description = "Thanks for subscribing to our newsletter!";
-  
-  return (
-    <div className="flex items-center justify-center w-full">
-      <Alert title={title} description={description} />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/variants.raw.jsx b/apps/docs/content/components/alert/variants.raw.jsx
new file mode 100644
index 0000000000..1bb83af6b3
--- /dev/null
+++ b/apps/docs/content/components/alert/variants.raw.jsx
@@ -0,0 +1,16 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      {["solid", "bordered", "flat", "faded"].map((variant) => (
+        <Alert
+          key={variant}
+          color="secondary"
+          title={`This is a ${variant} variant alert`}
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts
index 07238ee96f..ddea95fb2e 100644
--- a/apps/docs/content/components/alert/variants.ts
+++ b/apps/docs/content/components/alert/variants.ts
@@ -1,14 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4 w-full">
-      {["solid", "bordered", "flat", "faded"].map((variant) => (
-        <Alert key={variant} variant={variant} color="secondary" title={\`This is a \${variant} variant alert\`}/>
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/with-action.raw.jsx b/apps/docs/content/components/alert/with-action.raw.jsx
new file mode 100644
index 0000000000..8e4ee60a88
--- /dev/null
+++ b/apps/docs/content/components/alert/with-action.raw.jsx
@@ -0,0 +1,19 @@
+import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert
+        color="warning"
+        description="Upgrade to a paid plan to continue"
+        endContent={
+          <Button color="warning" size="sm" variant="flat">
+            Upgrade
+          </Button>
+        }
+        title="You have no credits left"
+        variant="faded"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/with-action.ts b/apps/docs/content/components/alert/with-action.ts
index b4f9665f62..1bb611e21b 100644
--- a/apps/docs/content/components/alert/with-action.ts
+++ b/apps/docs/content/components/alert/with-action.ts
@@ -1,24 +1,4 @@
-const App = `import {Alert, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isVisible, setIsVisible] = React.useState(true);
-
-  return (
-    <div className="flex items-center justify-center w-full">
-      <Alert
-        color="warning"
-        description="Upgrade to a paid plan to continue"
-        endContent={
-          <Button color="warning" size="sm" variant="flat">
-            Upgrade
-          </Button>
-        }
-        title="You have no credits left"
-        variant="faded"
-      />
-    </div>
-  );
-}`;
+import App from "./with-action.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/with-icon.raw.jsx b/apps/docs/content/components/alert/with-icon.raw.jsx
new file mode 100644
index 0000000000..831e78982f
--- /dev/null
+++ b/apps/docs/content/components/alert/with-icon.raw.jsx
@@ -0,0 +1,33 @@
+import {Alert} from "@nextui-org/react";
+
+const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      data-name="Iconly/Curved/Profile"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path
+          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
+        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return <Alert icon={<UserIcon />}>An alert with a custom icon</Alert>;
+}
diff --git a/apps/docs/content/components/alert/with-icon.ts b/apps/docs/content/components/alert/with-icon.ts
index dd722fe63d..ca7c79da7b 100644
--- a/apps/docs/content/components/alert/with-icon.ts
+++ b/apps/docs/content/components/alert/with-icon.ts
@@ -1,49 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-const UserIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      data-name="Iconly/Curved/Profile"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      height={size || height || 24}
-      {...props}
-    >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      >
-        <path
-          data-name="Stroke 1"
-          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
-        />
-        <path
-          data-name="Stroke 3"
-          d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export default function App() {
-  return (
-    <Alert icon={<UserIcon />}>An alert with a custom icon</Alert>
-  );
-}`;
+import App from "./with-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/without-icon.raw.jsx b/apps/docs/content/components/alert/without-icon.raw.jsx
new file mode 100644
index 0000000000..bd25d413ed
--- /dev/null
+++ b/apps/docs/content/components/alert/without-icon.raw.jsx
@@ -0,0 +1,12 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "This is an alert";
+  const description = "Thanks for subscribing to our newsletter!";
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert hideIcon color="success" description={description} title={title} variant="faded" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/without-icon.ts b/apps/docs/content/components/alert/without-icon.ts
index b3432e6802..3c177c66b3 100644
--- a/apps/docs/content/components/alert/without-icon.ts
+++ b/apps/docs/content/components/alert/without-icon.ts
@@ -1,21 +1,4 @@
-const App = `import {Alert} from "@nextui-org/react";
-
-export default function App() {
-  const title = "This is an alert";
-  const description = "Thanks for subscribing to our newsletter!";
-  
-  return (
-    <div className="flex items-center justify-center w-full">
-      <Alert 
-        title={title} 
-        description={description} 
-        hideIcon 
-        color="success" 
-        variant="faded" 
-      />
-    </div>
-  );
-}`;
+import App from "./without-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,