Collab Toolbar

Component

About

A floating pill-shaped toolbar for collaborative editing UIs that groups action icons with dividers and shows a stack of overlapping collaborator avatars.

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

Code

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

Usage.tsx

"use client";

import { CollabToolbar } from "@/components/ui/collab-toolbar";

const avatars = [
  { name: "Jane Doe", imageUrl: "https://cdn.21st.dev/assets/mirror/1a/1a6d6132f2a50df30364a983fa12c7d3d832039c18561bfcd6a86c3f06dc3364.jpg" },
  { name: "Alex Kim", imageUrl: "https://cdn.21st.dev/assets/mirror/52/5281ae7a0151b241b8b48f1f50551e49e5b8631bf26c62da7d1f893f8fff4fab.jpg" },
  { name: "Sam Taylor", imageUrl: "https://cdn.21st.dev/assets/mirror/be/be9f9bdf186dfdfe95b85a9d7bfd9e1ad9af9cd85196c45b8f0ea129c7efbc0e.jpg" },
];

function CollabToolbarDemo() {
  return (
    <div className="flex items-center justify-center p-6">
      <CollabToolbar
        groups={[["phone", "desktop", "chat"], "avatars", ["upload", "menu"]]}
        avatars={avatars}
      />
    </div>
  );
}

export default CollabToolbarDemo;