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 } from "@/components/ui/avatar";
import {
  AvatarExtended,
  AvatarFallback,
} from "@/components/ui/avatar-extended";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <AvatarExtended>
        <Avatar className="size-8">
          <AvatarFallback name="Alice Martin" />
        </Avatar>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar className="size-10">
          <AvatarFallback name="Bob Chen" />
        </Avatar>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar className="size-12">
          <AvatarFallback name="Carol Davis" />
        </Avatar>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar className="size-16">
          <AvatarFallback name="Dave Kim" />
        </Avatar>
      </AvatarExtended>

      <AvatarExtended>
        <Avatar className="size-20 rounded-xl">
          <AvatarFallback name="Eve Lopez" />
        </Avatar>
      </AvatarExtended>
    </div>
  );
}