diff --git a/apps/docs/content/components/avatar/bordered.raw.jsx b/apps/docs/content/components/avatar/bordered.raw.jsx
new file mode 100644
index 0000000000..4c39afe103
--- /dev/null
+++ b/apps/docs/content/components/avatar/bordered.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts
index 0a6a75f976..4e025375c3 100644
--- a/apps/docs/content/components/avatar/bordered.ts
+++ b/apps/docs/content/components/avatar/bordered.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </div>
-  );
-}`;
+import App from "./bordered.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/colors.raw.jsx b/apps/docs/content/components/avatar/colors.raw.jsx
new file mode 100644
index 0000000000..8f64bc1413
--- /dev/null
+++ b/apps/docs/content/components/avatar/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered color="default" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar isBordered color="secondary" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered color="success" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered color="warning" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isBordered color="danger" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/colors.ts b/apps/docs/content/components/avatar/colors.ts
index d4bd93f4b9..d5bef810aa 100644
--- a/apps/docs/content/components/avatar/colors.ts
+++ b/apps/docs/content/components/avatar/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered color="default" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar isBordered color="secondary" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered color="success" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered color="warning" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isBordered color="danger" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/custom-fallback.raw.jsx b/apps/docs/content/components/avatar/custom-fallback.raw.jsx
new file mode 100644
index 0000000000..e9d7a19272
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-fallback.raw.jsx
@@ -0,0 +1,41 @@
+import {Avatar} from "@nextui-org/react";
+
+export const CameraIcon = ({fill, size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar
+        showFallback
+        fallback={
+          <CameraIcon
+            className="animate-pulse w-6 h-6 text-default-500"
+            fill="currentColor"
+            size={20}
+          />
+        }
+        src="https://images.unsplash.com/broken"
+      />
+      <Avatar showFallback name="Jane" src="https://images.unsplash.com/broken" />
+      <Avatar name="Joe" src="https://images.unsplash.com/broken" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/custom-fallback.ts b/apps/docs/content/components/avatar/custom-fallback.ts
index 171ee43b4f..24a9b3e8e2 100644
--- a/apps/docs/content/components/avatar/custom-fallback.ts
+++ b/apps/docs/content/components/avatar/custom-fallback.ts
@@ -1,41 +1,7 @@
-const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Avatar} from "@nextui-org/react";
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar showFallback src='https://images.unsplash.com/broken' fallback={
-        <CameraIcon className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
-      } />
-      <Avatar showFallback name='Jane' src='https://images.unsplash.com/broken' />
-      <Avatar name='Joe' src='https://images.unsplash.com/broken' />
-    </div>
-  );
-}`;
+import App from "./custom-fallback.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/avatar/custom-impl.raw.jsx b/apps/docs/content/components/avatar/custom-impl.raw.jsx
new file mode 100644
index 0000000000..af2b0ab084
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-impl.raw.jsx
@@ -0,0 +1,60 @@
+import {forwardRef, useMemo} from "react";
+import {AvatarIcon, useAvatar} from "@nextui-org/react";
+
+const MyAvatar = forwardRef((props, ref) => {
+  const {
+    src,
+    icon = <AvatarIcon />,
+    alt,
+    classNames,
+    slots,
+    name,
+    showFallback,
+    fallback: fallbackComponent,
+    getInitials,
+    getAvatarProps,
+    getImageProps,
+  } = useAvatar({
+    ref,
+    ...props,
+  });
+
+  const fallback = useMemo(() => {
+    if (!showFallback && src) return null;
+
+    const ariaLabel = alt || name || "avatar";
+
+    if (fallbackComponent) {
+      return (
+        <div
+          aria-label={ariaLabel}
+          className={slots.fallback({class: classNames?.fallback})}
+          role="img"
+        >
+          {fallbackComponent}
+        </div>
+      );
+    }
+
+    return name ? (
+      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
+        {getInitials(name)}
+      </span>
+    ) : (
+      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
+        {icon}
+      </span>
+    );
+  }, [showFallback, src, fallbackComponent, name, classNames]);
+
+  return (
+    <div {...getAvatarProps()}>
+      {src && <img {...getImageProps()} alt={alt} />}
+      {fallback}
+    </div>
+  );
+});
+
+MyAvatar.displayName = "MyAvatar";
+
+export default MyAvatar;
diff --git a/apps/docs/content/components/avatar/custom-impl.raw.tsx b/apps/docs/content/components/avatar/custom-impl.raw.tsx
new file mode 100644
index 0000000000..9cd0db925f
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-impl.raw.tsx
@@ -0,0 +1,62 @@
+import {forwardRef, useMemo} from "react";
+import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
+
+export interface AvatarProps extends BaseAvatarProps {}
+
+const MyAvatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
+  const {
+    src,
+    icon = <AvatarIcon />,
+    alt,
+    classNames,
+    slots,
+    name,
+    showFallback,
+    fallback: fallbackComponent,
+    getInitials,
+    getAvatarProps,
+    getImageProps,
+  } = useAvatar({
+    ref,
+    ...props,
+  });
+
+  const fallback = useMemo(() => {
+    if (!showFallback && src) return null;
+
+    const ariaLabel = alt || name || "avatar";
+
+    if (fallbackComponent) {
+      return (
+        <div
+          aria-label={ariaLabel}
+          className={slots.fallback({class: classNames?.fallback})}
+          role="img"
+        >
+          {fallbackComponent}
+        </div>
+      );
+    }
+
+    return name ? (
+      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
+        {getInitials(name)}
+      </span>
+    ) : (
+      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
+        {icon}
+      </span>
+    );
+  }, [showFallback, src, fallbackComponent, name, classNames]);
+
+  return (
+    <div {...getAvatarProps()}>
+      {src && <img {...getImageProps()} alt={alt} />}
+      {fallback}
+    </div>
+  );
+});
+
+MyAvatar.displayName = "MyAvatar";
+
+export default MyAvatar;
diff --git a/apps/docs/content/components/avatar/custom-impl.ts b/apps/docs/content/components/avatar/custom-impl.ts
index 5a0c2e9caf..ef0d8ef531 100644
--- a/apps/docs/content/components/avatar/custom-impl.ts
+++ b/apps/docs/content/components/avatar/custom-impl.ts
@@ -1,129 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {useMemo} from "react";
-
-import {AvatarIcon, useAvatar} from "@nextui-org/react";
-
-const MyAvatar = forwardRef((props, ref) => {
-  const {
-    src,
-    icon = <AvatarIcon />,
-    alt,
-    classNames,
-    slots,
-    name,
-    showFallback,
-    fallback: fallbackComponent,
-    getInitials,
-    getAvatarProps,
-    getImageProps,
-  } = useAvatar({
-    ref,
-    ...props,
-  });
-
-  const fallback = useMemo(() => {
-    if (!showFallback && src) return null;
-
-    const ariaLabel = alt || name || "avatar";
-
-    if (fallbackComponent) {
-      return (
-        <div
-          aria-label={ariaLabel}
-          className={slots.fallback({ class: classNames?.fallback })}
-          role="img"
-        >
-          {fallbackComponent}
-        </div>
-      );
-    }
-
-    return name ? (
-      <span aria-label={ariaLabel} className={slots.name({ class: classNames?.name })} role="img">
-        {getInitials(name)}
-      </span>
-    ) : (
-      <span aria-label={ariaLabel} className={slots.icon({ class: classNames?.icon })} role="img">
-        {icon}
-      </span>
-    );
-  }, [showFallback, src, fallbackComponent, name, classNames]);
-
-  return (
-    <div {...getAvatarProps()}>
-      {src && <img {...getImageProps()} alt={alt} />}
-      {fallback}
-    </div>
-  );
-});
-
-MyAvatar.displayName = "MyAvatar";
-
-export default MyAvatar;`;
-
-const AppTs = `import {forwardRef, useMemo} from "react";
-
-import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
-
-export interface AvatarProps extends BaseAvatarProps {}
-
-const MyAvatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
-  const {
-    src,
-    icon = <AvatarIcon />,
-    alt,
-    classNames,
-    slots,
-    name,
-    showFallback,
-    fallback: fallbackComponent,
-    getInitials,
-    getAvatarProps,
-    getImageProps,
-  } = useAvatar({
-    ref,
-    ...props,
-  });
-
-  const fallback = useMemo(() => {
-    if (!showFallback && src) return null;
-
-    const ariaLabel = alt || name || "avatar";
-
-    if (fallbackComponent) {
-      return (
-        <div
-          aria-label={ariaLabel}
-          className={slots.fallback({class: classNames?.fallback})}
-          role="img"
-        >
-          {fallbackComponent}
-        </div>
-      );
-    }
-
-    return name ? (
-      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
-        {getInitials(name)}
-      </span>
-    ) : (
-      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
-        {icon}
-      </span>
-    );
-  }, [showFallback, src, fallbackComponent, name, classNames]);
-
-  return (
-    <div {...getAvatarProps()}>
-      {src && <img {...getImageProps()} alt={alt} />}
-      {fallback}
-    </div>
-  );
-});
-
-Avatar.displayName = "MyAvatar";
-
-export default MyAvatar;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/custom.raw.jsx b/apps/docs/content/components/avatar/custom.raw.jsx
new file mode 100644
index 0000000000..fb19aa1dc2
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom.raw.jsx
@@ -0,0 +1,15 @@
+import {Avatar, AvatarIcon} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center">
+      <Avatar
+        classNames={{
+          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
+          icon: "text-black/80",
+        }}
+        icon={<AvatarIcon />}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/custom.ts b/apps/docs/content/components/avatar/custom.ts
index 022b950d9b..f6791778a9 100644
--- a/apps/docs/content/components/avatar/custom.ts
+++ b/apps/docs/content/components/avatar/custom.ts
@@ -1,18 +1,4 @@
-const App = `import {Avatar, AvatarIcon} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center">
-      <Avatar
-        icon={<AvatarIcon />}
-        classNames={{
-          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
-          icon: "text-black/80",
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./custom.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/disabled.raw.jsx b/apps/docs/content/components/avatar/disabled.raw.jsx
new file mode 100644
index 0000000000..99061379d4
--- /dev/null
+++ b/apps/docs/content/components/avatar/disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isDisabled name="Junior" />
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isDisabled name="Jane" />
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isDisabled name="Joe" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/disabled.ts b/apps/docs/content/components/avatar/disabled.ts
index 7449d40174..1a215cc91f 100644
--- a/apps/docs/content/components/avatar/disabled.ts
+++ b/apps/docs/content/components/avatar/disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isDisabled name="Junior" />
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isDisabled name="Jane" />
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isDisabled name="Joe" />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/fallbacks.raw.jsx b/apps/docs/content/components/avatar/fallbacks.raw.jsx
new file mode 100644
index 0000000000..dbde19d7f7
--- /dev/null
+++ b/apps/docs/content/components/avatar/fallbacks.raw.jsx
@@ -0,0 +1,11 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar showFallback src="https://images.unsplash.com/broken" />
+      <Avatar showFallback name="Jane" src="https://images.unsplash.com/broken" />
+      <Avatar name="Joe" src="https://images.unsplash.com/broken" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/fallbacks.ts b/apps/docs/content/components/avatar/fallbacks.ts
index 6af995a0ab..4abe22969c 100644
--- a/apps/docs/content/components/avatar/fallbacks.ts
+++ b/apps/docs/content/components/avatar/fallbacks.ts
@@ -1,14 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar showFallback src='https://images.unsplash.com/broken' />
-      <Avatar showFallback name='Jane' src='https://images.unsplash.com/broken' />
-      <Avatar name='Joe' src='https://images.unsplash.com/broken' />
-    </div>
-  );
-}`;
+import App from "./fallbacks.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-custom-count.raw.jsx b/apps/docs/content/components/avatar/group-custom-count.raw.jsx
new file mode 100644
index 0000000000..a436fc951a
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-count.raw.jsx
@@ -0,0 +1,21 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup
+      isBordered
+      max={3}
+      renderCount={(count) => (
+        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
+      )}
+      total={10}
+    >
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts
index a9ffab8b16..814b7842a4 100644
--- a/apps/docs/content/components/avatar/group-custom-count.ts
+++ b/apps/docs/content/components/avatar/group-custom-count.ts
@@ -1,24 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup
-      isBordered
-      max={3}
-      total={10}
-      renderCount={(count) => (
-        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
-      )}
-    >
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-custom-count.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.jsx b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx
new file mode 100644
index 0000000000..59945aafb1
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx
@@ -0,0 +1,29 @@
+import {forwardRef} from "react";
+import {Avatar, useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react";
+
+const AvatarGroup = forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    renderCount = (count) => <Avatar name={`+${count}`} />,
+    getAvatarGroupProps,
+  } = useAvatarGroup({
+    ref,
+    ...props,
+  });
+
+  return (
+    <Component {...getAvatarGroupProps()}>
+      <AvatarGroupProvider value={context}>
+        {clones}
+        {remainingCount > 0 && renderCount(remainingCount)}
+      </AvatarGroupProvider>
+    </Component>
+  );
+});
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export default AvatarGroup;
diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.tsx b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx
new file mode 100644
index 0000000000..8535a023f8
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx
@@ -0,0 +1,36 @@
+import {forwardRef} from "react";
+import {
+  Avatar,
+  useAvatarGroup,
+  AvatarGroupProvider,
+  AvatarGroupProps as BaseAvatarGroupProps,
+} from "@nextui-org/react";
+
+export interface AvatarGroupProps extends BaseAvatarGroupProps {}
+
+const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    renderCount = (count) => <Avatar name={`+${count}`} />,
+    getAvatarGroupProps,
+  } = useAvatarGroup({
+    ref,
+    ...props,
+  });
+
+  return (
+    <Component {...getAvatarGroupProps()}>
+      <AvatarGroupProvider value={context}>
+        {clones}
+        {remainingCount > 0 && renderCount(remainingCount)}
+      </AvatarGroupProvider>
+    </Component>
+  );
+});
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export default AvatarGroup;
diff --git a/apps/docs/content/components/avatar/group-custom-impl.ts b/apps/docs/content/components/avatar/group-custom-impl.ts
index dbacff25dd..16dbee71c5 100644
--- a/apps/docs/content/components/avatar/group-custom-impl.ts
+++ b/apps/docs/content/components/avatar/group-custom-impl.ts
@@ -1,68 +1,5 @@
-const App = `import {forwardRef} from "react";
-
-import {useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react";
-import Avatar from "./avatar"; // your custom avatar or nextui avatar
-
-const AvatarGroup = forwardRef((props, ref) => {
-  const {
-    Component,
-    clones,
-    context,
-    remainingCount,
-    renderCount = (count) => <Avatar name={\`+\${count}\`} />,
-    getAvatarGroupProps,
-  } = useAvatarGroup({
-    ref,
-    ...props,
-  });
-
-  return (
-    <Component {...getAvatarGroupProps()}>
-      <AvatarGroupProvider value={context}>
-        {clones}
-        {remainingCount > 0 && renderCount(remainingCount)}
-      </AvatarGroupProvider>
-    </Component>
-  );
-});
-
-AvatarGroup.displayName = "AvatarGroup";
-
-export default AvatarGroup;`;
-
-const AppTs = `import {forwardRef} from "react";
-
-import {useAvatarGroup, AvatarGroupProvider, AvatarGroupProps as BaseAvatarGroupProps} from "@nextui-org/react";
-import Avatar from "./avatar"; // your custom avatar or nextui avatar
-
-export interface AvatarGroupProps extends BaseAvatarGroupProps {}
-
-const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
-  const {
-    Component,
-    clones,
-    context,
-    remainingCount,
-    renderCount = (count) => <Avatar name={\`+\${count}\`} />,
-    getAvatarGroupProps,
-  } = useAvatarGroup({
-    ref,
-    ...props,
-  });
-
-  return (
-    <Component {...getAvatarGroupProps()}>
-      <AvatarGroupProvider value={context}>
-        {clones}
-        {remainingCount > 0 && renderCount(remainingCount)}
-      </AvatarGroupProvider>
-    </Component>
-  );
-});
-
-AvatarGroup.displayName = "AvatarGroup";
-
-export default AvatarGroup;`;
+import App from "./group-custom-impl.raw.jsx?raw";
+import AppTs from "./group-custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-disabled.raw.jsx b/apps/docs/content/components/avatar/group-disabled.raw.jsx
new file mode 100644
index 0000000000..da8721dc3d
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered isDisabled>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-disabled.ts b/apps/docs/content/components/avatar/group-disabled.ts
index ba703b89df..a0fb219d26 100644
--- a/apps/docs/content/components/avatar/group-disabled.ts
+++ b/apps/docs/content/components/avatar/group-disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered isDisabled>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-grid.raw.jsx b/apps/docs/content/components/avatar/group-grid.raw.jsx
new file mode 100644
index 0000000000..eebe242a18
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-grid.raw.jsx
@@ -0,0 +1,17 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered isGrid max={7}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4f29026707d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026710d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026712d" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-grid.ts b/apps/docs/content/components/avatar/group-grid.ts
index abd2a74431..1c768c94c1 100644
--- a/apps/docs/content/components/avatar/group-grid.ts
+++ b/apps/docs/content/components/avatar/group-grid.ts
@@ -1,20 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered isGrid max={7}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4f29026707d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026710d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026712d" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-grid.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-max.raw.jsx b/apps/docs/content/components/avatar/group-max.raw.jsx
new file mode 100644
index 0000000000..b1109cff3c
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-max.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered max={3}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-max.ts b/apps/docs/content/components/avatar/group-max.ts
index 5bc76a002b..c2515e86cb 100644
--- a/apps/docs/content/components/avatar/group-max.ts
+++ b/apps/docs/content/components/avatar/group-max.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered max={3}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-max.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-total.raw.jsx b/apps/docs/content/components/avatar/group-total.raw.jsx
new file mode 100644
index 0000000000..d1ce696618
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-total.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered max={3} total={10}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-total.ts b/apps/docs/content/components/avatar/group-total.ts
index 463073b931..3545b036f1 100644
--- a/apps/docs/content/components/avatar/group-total.ts
+++ b/apps/docs/content/components/avatar/group-total.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered max={3} total={10}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-total.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group.raw.jsx b/apps/docs/content/components/avatar/group.raw.jsx
new file mode 100644
index 0000000000..827de4ca2f
--- /dev/null
+++ b/apps/docs/content/components/avatar/group.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts
index b22b13adce..0660a894cd 100644
--- a/apps/docs/content/components/avatar/group.ts
+++ b/apps/docs/content/components/avatar/group.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/radius.raw.jsx b/apps/docs/content/components/avatar/radius.raw.jsx
new file mode 100644
index 0000000000..94da5df6b8
--- /dev/null
+++ b/apps/docs/content/components/avatar/radius.raw.jsx
@@ -0,0 +1,12 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/radius.ts b/apps/docs/content/components/avatar/radius.ts
index 066a399d59..7b78db1ce0 100644
--- a/apps/docs/content/components/avatar/radius.ts
+++ b/apps/docs/content/components/avatar/radius.ts
@@ -1,15 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-      <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/sizes.raw.jsx b/apps/docs/content/components/avatar/sizes.raw.jsx
new file mode 100644
index 0000000000..6e3f73560f
--- /dev/null
+++ b/apps/docs/content/components/avatar/sizes.raw.jsx
@@ -0,0 +1,16 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar className="w-6 h-6 text-tiny" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar size="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar size="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar size="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar
+        className="w-20 h-20 text-large"
+        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/sizes.ts b/apps/docs/content/components/avatar/sizes.ts
index 993396e524..85a2f5b30b 100644
--- a/apps/docs/content/components/avatar/sizes.ts
+++ b/apps/docs/content/components/avatar/sizes.ts
@@ -1,16 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" className="w-6 h-6 text-tiny"  />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" size="sm" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" size="md" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" size="lg" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-large" />
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/usage.raw.jsx b/apps/docs/content/components/avatar/usage.raw.jsx
new file mode 100644
index 0000000000..37b9b49dc4
--- /dev/null
+++ b/apps/docs/content/components/avatar/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar name="Junior" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar name="Jane" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar name="Joe" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/usage.ts b/apps/docs/content/components/avatar/usage.ts
index f55f584c8e..1118304c37 100644
--- a/apps/docs/content/components/avatar/usage.ts
+++ b/apps/docs/content/components/avatar/usage.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar name="Junior" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar name="Jane" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar name="Joe" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,