Avatar Group

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

Loading...

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

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.