Avatar Extended

Component 1

About

A set of avatar overlay pieces (status ring, online indicator, notification badge, corner icon, and a procedurally-generated fallback image) for decorating a user avatar with presence, verification, or unread-count states.

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

Code

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

Usage.tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AvatarExtended, AvatarIcon } from "@/components/ui/avatar-extended";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <AvatarExtended>
        <Avatar>
          <AvatarImage
            alt="Elon Musk"
            src="https://avatars.spaceui.one/v1?name=elonmusk&variant=glass"
          />
          <AvatarFallback>EM</AvatarFallback>
        </Avatar>
        <AvatarIcon>
          <span className="sr-only">Verified</span>
          <svg
            aria-hidden="true"
            height="20"
            viewBox="0 0 24 24"
            width="20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              className="fill-background"
              d="M3.046 8.277A4.402 4.402 0 0 1 8.303 3.03a4.4 4.4 0 0 1 7.411 0 4.397 4.397 0 0 1 5.19 3.068c.207.713.23 1.466.067 2.19a4.4 4.4 0 0 1 0 7.415 4.403 4.403 0 0 1-3.06 5.187 4.398 4.398 0 0 1-2.186.072 4.398 4.398 0 0 1-7.422 0 4.398 4.398 0 0 1-5.257-5.248 4.4 4.4 0 0 1 0-7.437Z"
            />
            <path
              className="fill-primary"
              d="M4.674 8.954a3.602 3.602 0 0 1 4.301-4.293 3.6 3.6 0 0 1 6.064 0 3.598 3.598 0 0 1 4.3 4.302 3.6 3.6 0 0 1 0 6.067 3.6 3.6 0 0 1-4.29 4.302 3.6 3.6 0 0 1-6.074 0 3.598 3.598 0 0 1-4.3-4.293 3.6 3.6 0 0 1 0-6.085Z"
            />
            <path
              className="fill-background"
              d="M15.707 9.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z"
            />
          </svg>
        </AvatarIcon>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar>
          <AvatarImage
            alt="Max"
            src="https://avatars.spaceui.one/v1?name=max&variant=pebble"
          />
          <AvatarFallback>MA</AvatarFallback>
        </Avatar>
        <AvatarIcon>
          <span className="sr-only">SpaceUI Team</span>
          <img
            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iU3BhY2UgVUkgTG9nbyI+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImxvZ28tY2lyY2xlLWNsaXAtZGFyayI+CiAgICAgIDxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMyIi8+CiAgICA8L2NsaXBQYXRoPgogICAgPGZpbHRlciBpZD0iZ29vLWRhcmsiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgaW49IlNvdXJjZUdyYXBoaWMiIHN0ZERldmlhdGlvbj0iMy40MCIgcmVzdWx0PSJiIi8+CiAgICAgIDxmZUNvbG9yTWF0cml4IGluPSJiIiBtb2RlPSJtYXRyaXgiIHZhbHVlcz0iMSAwIDAgMCAwICAwIDEgMCAwIDAgIDAgMCAxIDAgMCAgMCAwIDAgMjAgLTgiLz4KICAgIDwvZmlsdGVyPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJzaGVlbi1kYXJrIiBjeD0iLjMyIiBjeT0iLjI0IiByPSIuOSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIuOSIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4zNSIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIuMzUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNyIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBjbGlwLXBhdGg9InVybCgjbG9nby1jaXJjbGUtY2xpcC1kYXJrKSI+CiAgICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMiIgZmlsbD0iIzE3MTcxNyIvPgogICAgPGcgZmlsdGVyPSJ1cmwoI2dvby1kYXJrKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzKSI+CiAgICAgIDxjaXJjbGUgY3g9IjI0LjkxIiBjeT0iNDIuMjkiIHI9IjYuMzMiIGZpbGw9IiM1OWFkZWYiLz4KICAgICAgPGNpcmNsZSBjeD0iMjIuMTEiIGN5PSIxNS45MiIgcj0iNC42NCIgZmlsbD0iIzBhMWE0YSIvPgogICAgICA8Y2lyY2xlIGN4PSIxNS42NyIgY3k9IjI4LjEwIiByPSI1LjQxIiBmaWxsPSIjNjA3M2ZmIi8+CiAgICAgIDxjaXJjbGUgY3g9IjIxLjcxIiBjeT0iMjUuNzUiIHI9IjUuMjEiIGZpbGw9IiMxZjRmZDgiLz4KICAgICAgPGNpcmNsZSBjeD0iNDYuMzciIGN5PSIzMi41MCIgcj0iNS41OSIgZmlsbD0iIzU5YWRlZiIvPgogICAgICA8Y2lyY2xlIGN4PSI0My4xMyIgY3k9IjM4LjkwIiByPSI3LjU0IiBmaWxsPSIjNjA3M2ZmIi8+CiAgICAgIDxjaXJjbGUgY3g9IjQ0LjI4IiBjeT0iMTUuOTkiIHI9IjYuNDgiIGZpbGw9IiM1OWFkZWYiLz4KICAgICAgPGNpcmNsZSBjeD0iNDguNTIiIGN5PSIzMi45MCIgcj0iNS41OSIgZmlsbD0iIzBhMWE0YSIvPgogICAgPC9nPgogICAgPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzIiIGZpbGw9InVybCgjc2hlZW4tZGFyaykiLz4KICA8L2c+Cjwvc3ZnPg=="
            alt="SpaceUI"
            className="size-full rounded-full object-cover p-0.5"
          />
        </AvatarIcon>
      </AvatarExtended>
    </div>
  );
}