labsUI

AvatarGroup

Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, keeping stack order.

npx @kznlabs/labsui add avatar-group
Size:
  • +6 more
import { AvatarGroup } from "@/components/ui/avatar-group";export function Team({ users }: { users: { alt: string; src?: string }[] }) {  return <AvatarGroup users={users} max={4} size="lg" />;}

<AvatarGroup>

Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, staying in stack order.

  • users*
    GroupUser[]

    People in order; alt is each one's name.

  • maxdefault 4
    number

    How many avatars to show before the +N chip.

  • sizedefault "default"
    "sm" | "default" | "lg"

    Size of every avatar and the chip.

PropTypeDefault
users*

People in order; alt is each one's name.

GroupUser[]—
max

How many avatars to show before the +N chip.

number4
size

Size of every avatar and the chip.

"sm" | "default" | "lg""default"
type GroupUser
{ alt: string; src?: string; id?: string; }

* required. Every component also takes className.