Avatar Group

Component 5

About

A row of overlapping avatar circles, each rimmed with the page background, for showing several people (like a team or participant list) as one compact pile.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Avatar Group to your project and fits it to your theme.

Code

How Avatar Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

function Face({ label, background }: { label: string; background: string }) {
  return (
    <span
      aria-label={label}
      title={label}
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        blockSize: "2em",
        inlineSize: "2em",
        borderRadius: "9999px",
        background,
        color: "var(--bs-color-ink-on-primary, #fff)",
        fontSize: "0.75em",
        letterSpacing: "0.02em",
        userSelect: "none",
      }}
    >
      {label}
    </span>
  );
}

/** Avatars overlap one row, each rimmed in the ground so the pile stays
 * legible. */
export default function AvatarGroupDemo() {
  return (
    <div className="flex min-h-[200px] w-full items-center justify-center bg-background p-8">
      <AvatarGroup>
        <Face label="Q" background="var(--bs-color-info)" />
        <Face label="C" background="var(--bs-color-success)" />
        <Face label="Z" background="var(--bs-color-danger)" />
        <Face label="T" background="var(--bs-color-warning)" />
      </AvatarGroup>
    </div>
  );
}