Avatar Extended

Component

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, AvatarBadge } from "@/components/ui/avatar-extended";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AvatarExtended>
        <Avatar>
          <AvatarImage
            alt="Elon Musk"
            src="https://avatars.spaceui.one/v1?name=elonmusk&variant=titan"
          />
          <AvatarFallback>EM</AvatarFallback>
        </Avatar>
        <AvatarBadge>1</AvatarBadge>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar>
          <AvatarImage
            alt="Nova"
            src="https://avatars.spaceui.one/v1?name=nova&variant=glass"
          />
          <AvatarFallback>NV</AvatarFallback>
        </Avatar>
        <AvatarBadge variant="destructive">20</AvatarBadge>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar>
          <AvatarImage
            alt="Evil Rabbit"
            src="https://avatars.spaceui.one/v1?name=evilrabbit&variant=pebble"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarBadge variant="info">+6</AvatarBadge>
      </AvatarExtended>
    </div>
  );
}