up

src/runtime/components/elements/AvatarGroup.vue

@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { classNames } from '../../utils/'
 import Avatar from './Avatar'
 import $ui from '#build/ui'
 
@@ -37,9 +38,13 @@ const props = defineProps({
     type: Number,
     default: null
   },
-  avatarClass: {
+  ringClass: {
     type: String,
-    default: () => $ui.avatarGroup.avatar
+    default: () => $ui.avatarGroup.ring
+  },
+  marginClass: {
+    type: String,
+    default: () => $ui.avatarGroup.margin
   }
 })
 
@@ -60,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">

src/runtime/presets/default.ts

@@ -374,7 +374,8 @@ export default (variantColors: string[]) => {
   }
 
   const avatarGroup = {
-    avatar: 'ring-2 u-ring-white -ml-1.5 first:ml-0'
+    ring: 'ring-2 u-ring-white',
+    margin: '-ml-1.5 first:ml-0'
   }
 
   const slideover = {