Avatar Group

What it does

AvatarGrouprenders a compact pill-shaped widget: up to five circular avatar photos overlapping each other, followed by a short text label. It is typically placed directly below the hero headline and description as a lightweight trust signal — the visual equivalent of "real people use this."

The component hides itself automatically when show is false or the members array is empty.

Usage

import AvatarGroup from "@/components/AvatarGroup";

<AvatarGroup />

Configuration

avatarGroup: {
  show: true,
  text: "Loved by 2,000+ teams worldwide.",
  members: [
    { src: "https://i.pravatar.cc/100?img=11", alt: "Developer avatar 1" },
    { src: "https://i.pravatar.cc/100?img=12", alt: "Developer avatar 2" },
    { src: "https://i.pravatar.cc/100?img=13", alt: "Developer avatar 3" },
    { src: "https://i.pravatar.cc/100?img=14", alt: "Developer avatar 4" },
    { src: "https://i.pravatar.cc/100?img=15", alt: "Developer avatar 5" },
  ],
},

• show — set to false to hide the component globally without removing it from your page.
• text — the label displayed to the right of the avatars. Typically a user count and short value statement: "Loved by 2,000+ teams worldwide." Keep it to one short sentence.
• members — an array of avatar objects. Each member has a src (image URL or local path) and an alt (screen reader description). Only the first 5 entries are ever shown regardless of how many you add — the rest are ignored.