Avatar

A user avatar image that gracefully falls back to initials or an icon when the photo is missing, with optional online-status dot, verified badge, company-logo badge, and grouped/stacked or profile-photo variants.

Proper UI

byproperui

import Avatar from "@/components/ui/avatar";
import { AvatarAddButton } from "@/components/ui/avatar-utils/base-components-index";

const people = [
  {
    src: "https://cdn.21st.dev/assets/localized/aef1dddf3f0a7db7576b169903741465d2f7afebd0666243376970fa95f6e00a.svg",
    alt: "Olivia Rhye",
    username: "@olivia",
  },
  {
    src: "https://cdn.21st.dev/assets/localized/49f0bdb58c7a89c8e5c5ef0ba80a7cac0c48c9a12776625d2777df88857413ff.svg",
    alt: "Phoenix Baker",
    username: "@phoenix",
  },
  {
    src: "https://cdn.21st.dev/assets/localized/01b03787bc15cbf02c1ca467293faf370f5d423840e6bdb858ef676d6b1abcf8.svg",
    alt: "Lana Steiner",
    username: "@lana",
  },
  {
    src: "https://cdn.21st.dev/assets/localized/f8693d5770460429b2c3b97cf0ed1c4765f06772fed3e5166e70f245af4d6ffa.svg",
    alt: "Demi Wilkinson",
    username: "@demi",
  },
  {
    src: "https://cdn.21st.dev/assets/localized/1d12613bcf66192873c563fb54af64aa13a024f999a460bb15e65793cad8455c.svg",
    alt: "Candice Wu",
    username: "@candice",
  },
  {
    src: "https://cdn.21st.dev/assets/localized/5ae4c4920058ad369fdebdccfd416e7b7c039ddec8e045538e94c67691cc02ca.svg",
    alt: "Natali Craig",
    username: "@natali",
  },
];

export default function AvatarGroupDemo() {
  return (
    <div className="grid grid-cols-1 gap-8">
      <div className="flex gap-2">
        <div className="flex -space-x-1">
          {people.map((person) => (
            <Avatar
              key={person.username}
              className="ring-bg-primary ring-[1.5px]"
              size="xs"
              src={person.src}
              alt={person.alt}
            />
          ))}
          <Avatar
            size="xs"
            className="ring-bg-primary ring-[1.5px]"
            placeholder={
              <span className="text-quaternary flex items-center justify-center text-xs font-semibold">
                +5
              </span>
            }
          />
        </div>
        <AvatarAddButton size="xs" />
      </div>
      <div className="flex gap-2">
        <div className="flex -space-x-2">
          {people.map((person) => (
            <Avatar
              key={person.username}
              className="ring-bg-primary ring-[1.5px]"
              size="sm"
              src={person.src}
              alt={person.alt}
            />
          ))}
          <Avatar
            size="sm"
            className="ring-bg-primary ring-[1.5px]"
            placeholder={
              <span className="text-quaternary flex items-center justify-center text-sm font-semibold">
                +5
              </span>
            }
          />
        </div>
        <AvatarAddButton size="sm" />
      </div>
      <div className="flex gap-2">
        <div className="flex -space-x-3">
          {people.map((person) => (
            <Avatar
              key={person.username}
              className="ring-bg-primary ring-[1.5px]"
              size="md"
              src={person.src}
              alt={person.alt}
            />
          ))}
          <Avatar
            size="md"
            className="ring-bg-primary ring-[1.5px]"
            placeholder={
              <span className="text-md text-quaternary flex items-center justify-center font-semibold">
                +5
              </span>
            }
          />
        </div>
        <AvatarAddButton size="md" />
      </div>
    </div>
  );
}