Presence Bar

Component

About

A row of avatars showing who else is currently viewing or editing a shared document, with each person's status and live join/leave announcements for screen reader users.

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

Code

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

Usage.tsx

"use client";

import { PresenceBar } from "@/components/ui/presence-bar";
import type { Participant } from "@/components/ui/presence-bar";

const participants: Participant[] = [
  { id: "u1", name: "Vaibhav Zapadiya", you: true, status: "active" },
  { id: "u2", name: "Sarah Rosewood", status: "active" },
  { id: "u3", name: "Max Oduya", status: "idle" },
  { id: "u4", name: "Lena Fischer", status: "active" },
];

export default function PresenceBarDemo() {
  return (
    <div className="flex w-full min-h-[220px] items-center justify-center bg-background p-8 text-foreground">
      <PresenceBar
        participants={participants}
        label="People viewing this document"
      />
    </div>
  );
}