Avatar Group

A stacked group of profile images with initials and an overflow count.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/avatar-group.json

Usage

tsx

import { AvatarGroup } from "@/components/hangry-ui/components/avatar-group";

<AvatarGroup
  avatars={[
    { name: "Alex Morgan", src: "/alex.jpg" },
    { name: "Sam Rivera", src: "/sam.jpg" },
  ]}
  max={3}
  size={40}
/>

Props

Prop	Type	Default	Description
`avatars`	`{ name: string; src?: string }[]`	`5 sample people`	People to display. Missing or failed images show initials.
`max`	`number`	`4`	Maximum avatars to show before displaying the remaining count.
`size`	`number`	`40`	Avatar width and height in pixels.
`className`	`string`	`""`	Additional classes on the group container.
Native div props	`ComponentProps<"div">`	—	Forwards standard div attributes and event handlers.

Setup notes

Avatar Group reuses the Avatar component, so install both files when copying it manually. The registry installation includes the dependency automatically.