import * as AvatarGroup from '@/components/ui/avatar-group';
import * as Avatar from '@/components/ui/avatar';

export function AvatarGroupSize() {
  return (
    <div className='flex flex-col items-center gap-6'>
      <AvatarGroup.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='72'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='64'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='56'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='48'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='40'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='32'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='24'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>

      <AvatarGroup.Root size='20'>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/emma.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/james.png' />
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image src='/images/avatar/illustration/sophia.png' />
        </Avatar.Root>
        <AvatarGroup.Overflow>+9</AvatarGroup.Overflow>
      </AvatarGroup.Root>
    </div>
  );
}
Avatar Group

Instalación

Uso

Ejemplos oficiales (2)
