Tab Coordinator

A panel that elects a single leader among a page's open browser tabs using the Web Locks API (falling back to a localStorage heartbeat), and shows a live log of peer tabs and messages passed between them over BroadcastChannel.

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

"use client";

import TabCoordinator from "@/components/ui/tab-coordinator";

export default function TabCoordinatorDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-app p-6">
      <TabCoordinator label="Tabs on this page" className="w-full max-w-xl" />
    </div>
  );
}