Avatar Group · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JAvatarGroup } from '@juxtui/ui'

Usage #

<JAvatarGroup :items="[
  { src: '/ada.jpg', name: 'Ada Lovelace' },
  { name: 'Grace Hopper' },
]" :max="4" />

Each item is the same shape JAvatar takes — src and name — so fallbacks and initials work the same way here.

Overlap and ring colour aren’t configurable per instance; they follow --j-avatar-group-overlap and the surface behind the group.

Variants & examples #

Sizes and shapes#

<script setup lang="ts">
const team = [
  { src: '/avatars/1.svg', name: 'Mara Quinn' },
  { src: '/avatars/2.svg', name: 'Theo Park' },
  { name: 'Iris Chen' },
]
</script>

<template>
  <div class="flex flex-col items-start gap-4">
    <JAvatarGroup :items="team" size="sm" />
    <JAvatarGroup :items="team" size="md" />
    <JAvatarGroup :items="team" size="lg" />
    <JAvatarGroup :items="team" size="lg" shape="square" />
  </div>
</template>

Overflow#

Anything past max collapses into a count.

9 reviewers requested

<script setup lang="ts">
const reviewers = Array.from({ length: 9 }, (_, i) => ({ name: `Reviewer ${i + 1}` }))
</script>

<template>
  <div class="flex items-center gap-3">
    <JAvatarGroup :items="reviewers" :max="3" size="sm" />
    <span class="text-sm text-fg-muted">9 reviewers requested</span>
  </div>
</template>

API #

Props

Prop	Type	Default	Description
items	`Array<{ src?: string, name?: string }>`	—	The people or entities to render, in order.
max	`number`	—	Avatars shown before the rest collapse into a "+N" indicator. Unset shows all of them.
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Passed through to each `JAvatar`.
shape	`'circle' \| 'square'`	`'circle'`	Passed through to each `JAvatar` and the overflow indicator.

Accessibility #

The group is exposed as role="group" labelled with the total count, e.g. “5 people” — independent of how many are actually visible.
The overflow indicator is a plain element with a title tooltip; it isn’t reachable by keyboard, since it triggers nothing.