Avatar Group

Overlapping avatar circles that expand smoothly to reveal each user's name on hover.

Sarah Chen
Sarah Chen
Marcus brown
Marcus brown
Elena kate
Elena kate
Jessica Lee
Jessica Lee

Installation

npx shadcn@latest add https://scrollxui.dev/registry/avatar-group.json 

Usage

import { AvatarGroup } from "@/components/ui/avatar-group";
 
const avatars = [
    {
      imageUrl: "https://images.unsplash.com/photo-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop",
      profileUrl: "#",
      name: "Sarah Chen"
    },
    {
      imageUrl: "https://plus.unsplash.com/premium_photo-1671656349218-5218444643d8?q=80&w=1287&auto=format&fit=crop",
      profileUrl: "#",
      name: "Marcus Johnson"
    }
  ]
<AvatarGroup avatarUrls={avatars} />

API Reference

Avatar Group

Overlapping avatar circles that expand smoothly to reveal each user's name on hover.

Props

PropertyTypeDefaultDescription
classNamestring
Optional Tailwind/utility classes to style the container.
avatarUrls{ imageUrl: string; name: string; }[]required
Array of avatar objects containing image URL and user name.

Built withby Ahdeetai.