User Presence Avatar

Component 35

About

An avatar group that separates online and offline users into two clusters and smoothly re-animates members between clusters when someone toggles presence, with a name tooltip on hover.

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

Code

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

Usage.tsx

"use client";

import {
  UserPresenceAvatar,
  type PresenceUser,
} from "@/components/ui/user-presence-avatar";

const USERS: PresenceUser[] = [
  {
    id: 1,
    name: "Guillermo Rauch",
    src: "https://avatars.spaceui.one/v1?name=guillermorauch&variant=singularity",
    fallback: "GR",
    online: true,
  },
  {
    id: 2,
    name: "Lee Robinson",
    src: "https://avatars.spaceui.one/v1?name=leerobinson&variant=glass",
    fallback: "LR",
    online: true,
  },
  {
    id: 3,
    name: "Nova",
    src: "https://avatars.spaceui.one/v1?name=nova&variant=pebble",
    fallback: "NV",
    online: true,
  },
  {
    id: 4,
    name: "Lauren Tan",
    src: "https://avatars.spaceui.one/v1?name=laurentan&variant=solar-flare",
    fallback: "LT",
    online: true,
  },
  {
    id: 5,
    name: "Evil Rabbit",
    src: "https://avatars.spaceui.one/v1?name=evilrabbit&variant=titan",
    fallback: "ER",
    online: false,
  },
  {
    id: 6,
    name: "Alexandr Wang",
    src: "https://avatars.spaceui.one/v1?name=alexandrwang&variant=triton",
    fallback: "AW",
    online: false,
  },
  {
    id: 7,
    name: "Max Leiter",
    src: "https://avatars.spaceui.one/v1?name=maxleiter&variant=lumina",
    fallback: "ML",
    online: false,
  },
  {
    id: 8,
    name: "Elon Musk",
    src: "https://avatars.spaceui.one/v1?name=elonmusk&variant=shaula",
    fallback: "EM",
    online: false,
  },
  {
    id: 9,
    name: "Sam Altman",
    src: "https://avatars.spaceui.one/v1?name=samaltman&variant=invader",
    fallback: "SA",
    online: false,
  },
  {
    id: 10,
    name: "Andrej Karpathy",
    src: "https://avatars.spaceui.one/v1?name=andrejkarpathy&variant=kendo",
    fallback: "AK",
    online: false,
  },
];

export default function Demo() {
  return <UserPresenceAvatar users={USERS} />;
}

export { Demo as UserPresenceAvatarDemo };