diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md
index 0180c13b..946122ea 100644
--- a/docs/content/3.components/avatar-group.md
+++ b/docs/content/3.components/avatar-group.md
@@ -9,7 +9,58 @@ links:
## Usage
-## Examples
+Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
+
+::component-code
+---
+slots:
+ default: |
+
+
+
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
+
+### Size
+
+Use the `size` prop to change the size of all the avatars.
+
+::component-code
+---
+props:
+ size: md
+slots:
+ default: |
+
+
+
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
+
+### Max
+
+Use the `max` prop to limit the number of avatars displayed. The rest will be displayed as a `+X` avatar.
+
+::component-code
+---
+props:
+ max: 2
+slots:
+ default: >
+
+
+
+---
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="romhml"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="noook"}
+::
## API
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 2760340c..eff74dc2 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -119,6 +119,7 @@ export default defineNuxtConfig({
const globals = components.filter(c => [
'UAlert',
'UAvatar',
+ 'UAvatarGroup',
'UBadge',
'UButton',
'UIcon',
diff --git a/playground/app/pages/components/avatar.vue b/playground/app/pages/components/avatar.vue
index 27be4325..c67b8893 100644
--- a/playground/app/pages/components/avatar.vue
+++ b/playground/app/pages/components/avatar.vue
@@ -20,19 +20,19 @@ const sizes = Object.keys(theme.variants.size) as Array
-
+
-
-
+
+
-
+
-
-
+
+
diff --git a/test/components/AvatarGroup.spec.ts b/test/components/AvatarGroup.spec.ts
index 36a265a7..0680f00e 100644
--- a/test/components/AvatarGroup.spec.ts
+++ b/test/components/AvatarGroup.spec.ts
@@ -12,8 +12,8 @@ const AvatarGroupWrapper = defineComponent({
},
template: `
-
-
+
+
`
})
diff --git a/test/components/__snapshots__/AvatarGroup.spec.ts.snap b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
index 650c50ce..c1fc298e 100644
--- a/test/components/__snapshots__/AvatarGroup.spec.ts.snap
+++ b/test/components/__snapshots__/AvatarGroup.spec.ts.snap
@@ -1,77 +1,77 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`AvatarGroup > renders with as correctly 1`] = `"
s
A
b"`;
+exports[`AvatarGroup > renders with as correctly 1`] = `"
n
r
b"`;
exports[`AvatarGroup > renders with class correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with default slot correctly 1`] = `
""
`;
-exports[`AvatarGroup > renders with max correctly 1`] = `"+1
A
b "`;
+exports[`AvatarGroup > renders with max correctly 1`] = `"+1
r
b "`;
exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size lg correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size md correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size sm correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size xl correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with size xs correctly 1`] = `
""
`;
exports[`AvatarGroup > renders with ui correctly 1`] = `
""
`;