diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index 01f3e1d145..74bd2e781e 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -78,6 +78,7 @@ const components = [
     to: '/components/AvatarGroup',
     nuxt3: true,
     capi: true,
+    preset: true,
     typescript: true
   },
   {
diff --git a/src/runtime/components/elements/AvatarGroup.vue b/src/runtime/components/elements/AvatarGroup.vue
index 5ad832c8ab..a439a11db9 100644
--- a/src/runtime/components/elements/AvatarGroup.vue
+++ b/src/runtime/components/elements/AvatarGroup.vue
@@ -4,21 +4,23 @@
       v-for="(avatar, index) of displayedGroup"
       :key="index"
       v-bind="avatar"
-      class="ring-2 u-ring-white -ml-1.5 first:ml-0"
       :size="size"
+      :class="avatarClass"
     />
     <Avatar
       v-if="remainingGroupSize > 0"
-      class="ring-2 u-ring-white -ml-1.5 first:ml-0 text-[10px]"
       :size="size"
       :text="`+${remainingGroupSize}`"
+      :class="avatarClass"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { classNames } from '../../utils/'
 import Avatar from './Avatar'
+import $ui from '#build/ui'
 
 const props = defineProps({
   group: {
@@ -35,6 +37,14 @@ const props = defineProps({
   max: {
     type: Number,
     default: null
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.avatarGroup.ring
+  },
+  marginClass: {
+    type: String,
+    default: () => $ui.avatarGroup.margin
   }
 })
 
@@ -55,6 +65,13 @@ const remainingGroupSize = computed(() => {
 
   return avatars.value.length - props.max
 })
+
+const avatarClass = computed(() => {
+  return classNames(
+    props.ringClass,
+    props.marginClass
+  )
+})
 </script>
 
 <script lang="ts">
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 33bc64b628..a036bf5b2b 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -373,6 +373,11 @@ export default (variantColors: string[]) => {
     }
   }
 
+  const avatarGroup = {
+    ring: 'ring-2 u-ring-white',
+    margin: '-ml-1.5 first:ml-0'
+  }
+
   const slideover = {
     overlay: 'bg-gray-500/75 dark:bg-gray-600/75',
     base: 'relative flex-1 flex flex-col w-full focus:outline-none',
@@ -404,6 +409,7 @@ export default (variantColors: string[]) => {
     tabs,
     pills,
     avatar,
+    avatarGroup,
     slideover
   }
 }