Avatar Group
Overlapping avatar circles that expand smoothly to reveal each user's name on hover.
Sarah Chen
Marcus brown
Elena kate
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.