Avatar Circles

npx shadcn-svelte@latest add https://acme.com/r/avatar-circles

<script lang="ts">
  import { AvatarCircles } from "magic/avatar-circles";

  const avatars = [
    {
      imageUrl: "https://avatars.githubusercontent.com/u/1",
      profileUrl: "https://github.com/user1"
    },
    {
      imageUrl: "https://avatars.githubusercontent.com/u/2",
      profileUrl: "https://github.com/user2"
    },
    {
      imageUrl: "https://avatars.githubusercontent.com/u/3",
      profileUrl: "https://github.com/user3"
    }
  ];
</script>

<AvatarCircles avatarUrls={avatars} />

<script lang="ts">
  import { AvatarCircles } from "magic/avatar-circles";

  const teamMembers = [
    {
      imageUrl: "/avatars/alice.jpg",
      profileUrl: "/team/alice"
    },
    {
      imageUrl: "/avatars/bob.jpg",
      profileUrl: "/team/bob"
    },
    {
      imageUrl: "/avatars/charlie.jpg",
      profileUrl: "/team/charlie"
    }
  ];
</script>

<AvatarCircles avatarUrls={teamMembers} />

<script lang="ts">
  import { AvatarCircles } from "magic/avatar-circles";

  const contributors = [
    { imageUrl: "/avatar1.jpg", profileUrl: "/user1" },
    { imageUrl: "/avatar2.jpg", profileUrl: "/user2" },
    { imageUrl: "/avatar3.jpg", profileUrl: "/user3" }
  ];
</script>

<!-- Show 3 avatars + "5" indicator for 5 more people -->
<AvatarCircles avatarUrls={contributors} numPeople={5} />

<AvatarCircles 
  avatarUrls={contributors} 
  class="-space-x-6"
/>

interface Avatar {
  imageUrl: string;
  profileUrl: string;
}