Avatar Group

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

Installation

npx shadcn@latest add @scrollxui/avatar-group

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

Property	Type	Default	Description
`className`	string	`—`	Optional Tailwind/utility classes to style the container.
`avatarUrls`	{ imageUrl: string; name: string; }[]	`required`	Array of avatar objects containing image URL and user name.