A stacked row of user avatars with initials fallback, online/away/offline status dots, an overflow "+N" counter, and a staggered reveal animation.
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>
);
}