A floating pill-shaped toolbar for collaborative editing UIs that groups action icons with dividers and shows a stack of overlapping collaborator avatars.
"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;
Part of cult ui — browse the full library on 21st.dev.