Avatar Group

Component

About

A stacked row of user avatars with initials fallback, online/away/offline status dots, an overflow "+N" counter, and a staggered reveal animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Group to your project and fits it to your theme.

Code

How Avatar Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AvatarGroup from "@/components/ui/avatar-group";

export default function AvatarGroupDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-background p-10">
      <AvatarGroup
        max={4}
        size="md"
        users={[
          {
            name: "Ava Chen",
            avatar: "https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg",
            status: "online",
          },
          {
            name: "Liam Fox",
            avatar: "https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg",
            status: "away",
          },
          {
            name: "Maya Patel",
            avatar: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg",
          },
          {
            name: "Noah Kim",
            status: "offline",
          },
          {
            name: "Ivy Torres",
          },
          {
            name: "Ezra Wolfe",
          },
        ]}
      />
    </div>
  );
}