AvatarGroup

Avatar Group

A component to display a group of avatars with overlapping images.
user
user
user
user

Installation

npx react-nex add AvatarGroup

Components of Avatar Group

Avatar Group Component


user
user
user

Examples

Custom Container Style

Style the container using Tailwind CSS classes


user
user
user

Custom Image Container Style

Style the image container using Tailwind CSS classes


user
user
user

Overlap Order

Control the z-index overlap order using the overlap prop.


user
user
user
user
user
user

Props

children

  • Type: ReactNode
  • Description: The avatars to be displayed in the group.

containerStyle

  • Type: string
  • Description: Additional Tailwind CSS classes to apply to the avatar group container.

imageContainerStyle

  • Type: string
  • Description: Additional Tailwind CSS classes to apply to each avatar container.

overlap

  • Type: 'forward' | 'reverse'
  • Description: Determines the z-index order of the avatars. Use 'forward' for increasing z-index and 'reverse' for decreasing z-index.
AvatarBadge