Docs
πŸ—οΈ ⏐ Components
Elements
Avatar Group

AvatarGroup

The AvatarGroup component is designed to efficiently display a collection of user avatars, making it ideal for showcasing team members, participant lists, or any group of users. It smartly handles large numbers of avatars by showing a set maximum number on the screen, with an additional indicator for the number of hidden avatars.

Quick Start

To start using the AvatarGroup component, import it and the Avatar component from the reablocks library and provide the appropriate name props.

+3 more

Examples

Basic Usage

The AvatarGroup component arranges multiple Avatar components together, indicating excess avatars when surpassing the specified maximum size:

Theme Customization

AvatarGroup supports theming to ensure its appearance aligns with the overall design of your application. The default theme settings include:

  • root{}(3 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

Customization options available through the AvatarGroup component's properties:

PropDescriptionDefault
children *The avatars to display in the group.
ReactNode
classNameAdditional CSS classes to apply to the avatar group
string
sizeThe maximum number of avatars to show before +x more
number
10
themeTheme for the AvatarGroup
AvatarGroupTheme

Design and Usability Tips

  • Expandable Details: Provide a mechanism (e.g., tooltip or modal) to view all avatars in a group on click or hover, ensuring users can access every member's profile without cluttering the UI.
  • Customizable Views: Allow users to customize the visibility and ordering of avatars in a group, accommodating personal preferences and improving the experience.