{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee-logos",
  "type": "registry:example",
  "title": "Marquee Logos",
  "description": "Example showing an infinite scrolling logo carousel.",
  "registryDependencies": [
    "@magicui/marquee"
  ],
  "files": [
    {
      "path": "registry/example/marquee-logos.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Marquee } from \"@/registry/magicui/marquee\"\n\nconst logos = [\n  {\n    name: \"Microsoft\",\n    img: \"https://cdn.simpleicons.org/microsoft/000/fff\",\n  },\n  {\n    name: \"Apple\",\n    img: \"https://cdn.simpleicons.org/apple/000/fff\",\n  },\n  {\n    name: \"Google\",\n    img: \"https://cdn.simpleicons.org/google/000/fff\",\n  },\n  {\n    name: \"Facebook\",\n    img: \"https://cdn.simpleicons.org/facebook/000/fff\",\n  },\n  {\n    name: \"LinkedIn\",\n    img: \"https://cdn.simpleicons.org/linkedin/000/fff\",\n  },\n  {\n    name: \"Twitter\",\n    img: \"https://cdn.simpleicons.org/twitter/000/fff\",\n  },\n]\n\nconst Logo = ({ name, img }: { name: string; img: string }) => {\n  return (\n    <div className={cn(\"size-12 cursor-pointer\")}>\n      <img src={img} alt={name} />\n    </div>\n  )\n}\n\nexport default function MarqueeLogos() {\n  return (\n    <div className=\"bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl\">\n      <Marquee className=\"[--gap:3rem]\">\n        {logos.map((logo, idx) => (\n          <Logo key={idx} {...logo} />\n        ))}\n      </Marquee>\n      <div className=\"dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white\"></div>\n      <div className=\"dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white\"></div>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}