About
An avatar that shows a person's online/away/offline/thinking presence and an unread-message count badge on a generated, animated blob face.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Presence Avatar to your project and fits it to your theme.
Code
How Presence Avatar is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { PresenceAvatar } from "@/components/ui/presence-avatar";
export default function PresenceAvatarDemo() {
return (
<div className="flex items-center gap-6">
<PresenceAvatar name="scout" state="online" unread={3} />
<PresenceAvatar name="planner" state="thinking" />
<PresenceAvatar name="reviewer" state="away" />
<PresenceAvatar name="packager" state="offline" unread={128} />
</div>
);
}
Dependencies
More by alain00
View all
User Table
242
Group Chat
179
Password Field
3