AvatarGroup

AvatarGroup is a component that displays a group of avatars.

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage


<AvatarGroup squared={false} showRing={false} >
  <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
  <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
  <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
  <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
  <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
  <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
</AvatarGroup>


<AvatarGroup squared={false} showRing={false} >
  <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
  <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
  <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
  <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
  <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
  <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
</AvatarGroup>

Squared

ShowRing

AvatarGroup sizes

Sizes can be set using the size prop. The default size is "xl". The available sizes are: xs sm md lg xl 2xl 3xl

const AvatarGroupBasic = props => {
  return (
    <AvatarGroup {...props}>
      <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
      <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
      <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
      <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
      <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
      <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
    </AvatarGroup>
  );
};

const AvatarGroupStack = props => { return (

<Ariakit.Group
  aria-label="group of avatar groups"
  className="flex flex-col space-y-2"
>
  <AvatarGroupBasic size="xs" {...props} />
  <AvatarGroupBasic size="sm" {...props} />
  <AvatarGroupBasic size="md" {...props} />
  <AvatarGroupBasic size="lg" {...props} />
  <AvatarGroupBasic size="xl" {...props} />
  <AvatarGroupBasic size="2xl" {...props} />
  <AvatarGroupBasic size="3xl" {...props} />
</Ariakit.Group>
); };

render (<AvatarGroupStack/>);

const AvatarGroupBasic = props => {
  return (
    <AvatarGroup {...props}>
      <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
      <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
      <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
      <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
      <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
      <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
    </AvatarGroup>
  );
};

const AvatarGroupStack = props => { return (

<Ariakit.Group
  aria-label="group of avatar groups"
  className="flex flex-col space-y-2"
>
  <AvatarGroupBasic size="xs" {...props} />
  <AvatarGroupBasic size="sm" {...props} />
  <AvatarGroupBasic size="md" {...props} />
  <AvatarGroupBasic size="lg" {...props} />
  <AvatarGroupBasic size="xl" {...props} />
  <AvatarGroupBasic size="2xl" {...props} />
  <AvatarGroupBasic size="3xl" {...props} />
</Ariakit.Group>
); };

render (<AvatarGroupStack/>);

AvatarGroup styles

AvatarGroup also comes in two styles of avatar, rounded & squared

const AvatarGroupBasic = props => {
  return (
    <AvatarGroup {...props}>
      <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
      <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
      <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
      <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
      <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
      <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
    </AvatarGroup>
  );
};

const AvatarGroupStack = props => { return (

<AvatarGroup
  aria-label="group of avatar groups"
  className="flex flex-col space-y-2"
>
  <AvatarGroupBasic size="xl" {...props} />
  <AvatarGroupBasic size="xl" squared={true} {...props} />
</AvatarGroup>
); };

render (<AvatarGroupStack/>);

const AvatarGroupBasic = props => {
  return (
    <AvatarGroup {...props}>
      <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
      <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
      <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
      <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
      <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
      <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
    </AvatarGroup>
  );
};

const AvatarGroupStack = props => { return (

<AvatarGroup
  aria-label="group of avatar groups"
  className="flex flex-col space-y-2"
>
  <AvatarGroupBasic size="xl" {...props} />
  <AvatarGroupBasic size="xl" squared={true} {...props} />
</AvatarGroup>
); };

render (<AvatarGroupStack/>);

💡

Avatar Group doesn't come with any status indicators

AvatarGroup props

`max`

Set max to limit the number of avatars in the group. By default AvatarGroup will display all avatars.

<AvatarGroup max={3}>
  <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
  <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
  <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
  <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
  <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
  <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
</AvatarGroup>

<AvatarGroup max={3}>
  <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
  <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
  <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
  <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
  <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
  <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
</AvatarGroup>

`ringColor`

Set ringColor to change the color of the ring around the avatars. By default it is "ring-white". This props can be used to match the parent's background to the AvatarGroup.

<div className="flex h-20 w-40 items-center justify-center bg-orange-200">
  <AvatarGroup max={3} ringColor="ring-orange-200">
    <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
    <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
    <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
    <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
    <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
    <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
  </AvatarGroup>
</div>

<div className="flex h-20 w-40 items-center justify-center bg-orange-200">
  <AvatarGroup max={3} ringColor="ring-orange-200">
    <Avatar name="Leanne Graham" src="https://i.pravatar.cc/300?img=1" />
    <Avatar name="Ervin Howell" src="https://i.pravatar.cc/300?img=11" />
    <Avatar name="Clementine Bauch" src="https://i.pravatar.cc/300?img=21" />
    <Avatar name="Patricia Lebsack" src="https://i.pravatar.cc/300?img=31" />
    <Avatar name="Chelsey Dietrich" src="https://i.pravatar.cc/300?img=41" />
    <Avatar name="Dennis Schulist" src="https://i.pravatar.cc/300?img=51" />
  </AvatarGroup>
</div>

API Reference

Prop	Type	Default
`squared`	`boolean`	`true`
`size`	`union`	`xl`
`max`	`number`	`none`
`showRing`	`boolean`	`false`
`ringColor`	`string`	`ring-white`

Last updated on July 18, 2022