Avatarstack

import { AvatarStack, Avatar } from "fromsrc/client";

<AvatarStack>
  <Avatar
    name="Alice"
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=alice"
  />
  <Avatar
    name="Bob"
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=bob"
  />
  <Avatar
    name="Carol"
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=carol"
  />
</AvatarStack>;

<AvatarStack max={3}>
  <Avatar name="A" />
  <Avatar name="B" />
  <Avatar name="C" />
  <Avatar name="D" />
  <Avatar name="E" />
</AvatarStack>

<AvatarStack size="sm">
  <Avatar name="Small" />
  <Avatar name="Stack" />
</AvatarStack>

<AvatarStack size="md">
  <Avatar name="Medium" />
  <Avatar name="Stack" />
</AvatarStack>

<AvatarStack size="lg">
  <Avatar name="Large" />
  <Avatar name="Stack" />
</AvatarStack>

<AvatarStack>
  <img
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=1"
    className="size-full rounded-full"
  />
  <img
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=2"
    className="size-full rounded-full"
  />
  <img
    src="https://api.dicebear.com/7.x/avataaars/svg?seed=3"
    className="size-full rounded-full"
  />
</AvatarStack>