Avatar Circles

Overlapping circles of avatars.

+99

Edit on GitHub

Copy code

Show code

<script setup lang='ts'>
import AvatarCircles from '@/components/avatarCircle/AvatarCircles.vue'

const avatarUrls = [
  'https://avatars.githubusercontent.com/u/16860528',
  'https://avatars.githubusercontent.com/u/20110627',
  'https://avatars.githubusercontent.com/u/106103625',
  'https://avatars.githubusercontent.com/u/59228569',
]
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
    <AvatarCircles :num-people="99" :avatar-urls="avatarUrls" />
  </div>
</template>

Installation

Copy and paste the following code into your project:

AvatarCircles.vue

<script setup lang='ts'>
import { cn } from '@/lib/utils'

interface AvatarCirclesProps {
  class?: string
  numPeople?: number
  avatarUrls: string[]
}

const props = defineProps<AvatarCirclesProps>()

const className = cn(
  'z-10 flex -space-x-4 rtl:space-x-reverse',
  props.class,
)
</script>

<template>
  <div :class="className">
    <div v-for="(imageUrl, idx) in props.avatarUrls" :key="idx">
      <img
        :key="idx" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" :src="imageUrl"
        :height="40" :width="40" :alt="`Avatar ${idx + 1}`"
      >
    </div>
    <a
      class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
      href=""
    >
      +{{ props.numPeople }}
    </a>
  </div>
</template>

Props

Prop	Type	Description	Default
class	string	The class to be applied.	""
numPeople	number	The number appearing in the last circle.	99