Skip to main content

​
Usage

import { AvatarGroup } from '@kivora/react';

const users = [
  { src: '/user1.jpg', alt: 'Alice' },
  { src: '/user2.jpg', alt: 'Bob' },
  { src: '/user3.jpg', alt: 'Charlie' },
];

<AvatarGroup items={users} max={3} />

​
Examples

​
Basic Group

const users = [
  { alt: 'Alice Johnson' },
  { alt: 'Bob Smith' },
  { alt: 'Charlie Davis' },
  { alt: 'Diana Prince' },
];

<AvatarGroup items={users} />

​
With Max Limit

const users = [
  { alt: 'Alice' },
  { alt: 'Bob' },
  { alt: 'Charlie' },
  { alt: 'Diana' },
  { alt: 'Eve' },
  { alt: 'Frank' },
  { alt: 'Grace' },
];

<AvatarGroup items={users} max={4} />
When the number of items exceeds max, remaining avatars are shown as “+N”.

​
Different Sizes

<AvatarGroup items={users} size="sm" max={3} />

​
With Images

const teamMembers = [
  { src: '/alice.jpg', alt: 'Alice Johnson' },
  { src: '/bob.jpg', alt: 'Bob Smith' },
  { src: '/charlie.jpg', alt: 'Charlie Davis' },
  { alt: 'Diana Prince' },
  { alt: 'Eve Anderson' },
];

<AvatarGroup items={teamMembers} max={4} size="md" />

​
Props

​
items
AvatarProps[]
required
Array of avatar configurations. Each item can include src, alt, initials
​
max
number
default:5
Maximum number of avatars to show before “+N” overflow counter
​
size
'sm' | 'md' | 'lg' | 'xl'
default:"md"
Size applied to all avatars in the group
​
className
string
Additional CSS classes

​
Accessibility

  • Group uses role="group" with an aria-label indicating the number of members
  • Each avatar maintains its own accessibility features
  • Overflow counter includes aria-label with count of hidden members

Build docs developers (and LLMs) love

Get started for freeTalk to us