{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-cursors-bar",
  "type": "registry:ui",
  "title": "Live cursors bar",
  "description": "A multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/live-cursors-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/live-cursors-bar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\n\nfunction LiveCursorsBar({\n  people = [\n    { name: \"Aman\", color: \"var(--accent)\" },\n    { name: \"Casey\", color: \"oklch(0.52 0.12 150)\" },\n    { name: \"Riley\", color: \"oklch(0.55 0.19 25)\" },\n  ],\n  className,\n}: {\n  people?: { name: string; color: string }[]\n  className?: string\n}) {\n  return (\n    <div data-slot=\"live-cursors-bar\" className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"flex -space-x-2\">\n        {people.map((p) => (\n          <Avatar key={p.name} className=\"size-7 ring-2 ring-bg\" title={p.name}>\n            <AvatarFallback style={{ background: p.color, color: \"oklch(0.98 0 0)\" }}>{p.name.slice(0, 1)}</AvatarFallback>\n          </Avatar>\n        ))}\n      </div>\n      <p className=\"text-xs text-fg-muted\"><span className=\"font-medium text-fg\">{people.length}</span> editing now</p>\n    </div>\n  )\n}\nexport { LiveCursorsBar }\n"
    }
  ]
}