Avatar Group

An Avatar Group stacks several avatars into one overlapping row and collapses the rest into a count. It answers "who is on this?" in the space of a single line, and is the usual way to show the members of a team, the people on a call or the collaborators on a document.

Demo

Rendered live, with the same build of the library you install.

Collapsed after three:

NDAKRS+2

All of them, as a grid:

NDAKRSJPMM

Usage

Source

AvatarGroup.tsx

import { NAvatarGroup } from '@nayan-ui/react';

const members = [{ fallback: 'ND' }, { fallback: 'AK' }, { fallback: 'RS' }, { fallback: 'JP' }, { fallback: 'MM' }];

const AvatarGroup = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Collapsed after three:</h3>
      <div className="mb-5">
        <NAvatarGroup items={members} max={3} color="accent" variant="soft" />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">All of them, as a grid:</h3>
      <NAvatarGroup items={members} isGrid color="accent" variant="soft" />
    </div>
  );
};

export default AvatarGroup;

Attributes

9 props

Name	Type	Default	Details
items	NAvatarGroupItem[]	Required	The items prop.
max	number	Optional	Avatars shown before the rest are collapsed into a count.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'default'	The color prop.
variant	'default' \| 'soft'	'default'	The variant prop.
overlap	'clip' \| 'ring'	'ring'	How the avatars meet: overlapping with a ring, or clipped into each other.
isGrid	boolean	false	Lays the avatars out in a grid instead of an overlapping row.
className	string	''	The className prop.
avatarClassName	string	''	The avatarClassName prop.