{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud-demo",
  "registryDependencies": [
    "https://raw.githubusercontent.com/addisonk/custom-ui/main/public/r/logo-cloud.json"
  ],
  "files": [
    {
      "path": "registry/custom-ui/logo-cloud-demo.tsx",
      "content": "import type { SVGProps } from \"react\";\n\nimport {\n  LogoCloud,\n  type LogoCloudItem,\n} from \"@/components/custom-ui/logo-cloud\";\n\nconst iconClassName = \"h-9 w-auto max-w-[7rem] text-foreground\";\n\nconst logos: LogoCloudItem[] = [\n  {\n    name: \"GitHub\",\n    logo: <GithubLogo aria-label=\"GitHub\" className={iconClassName} />,\n  },\n  {\n    name: \"Vercel\",\n    logo: <VercelLogo aria-label=\"Vercel\" className={iconClassName} />,\n  },\n  {\n    name: \"OpenAI\",\n    logo: <OpenAILogo aria-label=\"OpenAI\" className={iconClassName} />,\n  },\n  {\n    name: \"Cursor\",\n    logo: <CursorLogo aria-label=\"Cursor\" className={iconClassName} />,\n  },\n  {\n    name: \"React\",\n    logo: <ReactLogo aria-label=\"React\" className={iconClassName} />,\n  },\n  {\n    name: \"shadcn/ui\",\n    logo: <ShadcnLogo aria-label=\"shadcn/ui\" className={iconClassName} />,\n  },\n  {\n    name: \"Expo\",\n    logo: <ExpoLogo aria-label=\"Expo\" className={iconClassName} />,\n  },\n  {\n    name: \"Astro\",\n    logo: <AstroLogo aria-label=\"Astro\" className={iconClassName} />,\n  },\n  {\n    name: \"Linear\",\n    logo: <LinearLogo aria-label=\"Linear\" className={iconClassName} />,\n  },\n  {\n    name: \"Supabase\",\n    logo: <SupabaseLogo aria-label=\"Supabase\" className={iconClassName} />,\n  },\n  {\n    name: \"Clerk\",\n    logo: <ClerkLogo aria-label=\"Clerk\" className={iconClassName} />,\n  },\n  {\n    name: \"Figma\",\n    logo: <FigmaLogo aria-label=\"Figma\" className={iconClassName} />,\n  },\n];\n\nexport default function LogoCloudDemo() {\n  return <LogoCloud logos={logos} />;\n}\n\nfunction GithubLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 1024 1024\" fill=\"none\">\n      <path\n        fill=\"currentColor\"\n        fillRule=\"evenodd\"\n        d=\"M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-.64-52.48-.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-.64-33.92 40.32-.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28s87.04 5.76 128 17.28c97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-.64 123.52-.64 140.8 0 13.44 9.6 29.44 35.2 24.32C877.44 929.92 1024 737.92 1024 512 1024 229.12 794.88 0 512 0\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nfunction VercelLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 256 222\" preserveAspectRatio=\"xMidYMid\">\n      <path fill=\"currentColor\" d=\"m128 0 128 221.705H0z\" />\n    </svg>\n  );\n}\n\nfunction OpenAILogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} preserveAspectRatio=\"xMidYMid\" viewBox=\"0 0 256 260\">\n      <path\n        fill=\"currentColor\"\n        d=\"M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63 21.795-12.585a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z\"\n      />\n    </svg>\n  );\n}\n\nfunction CursorLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 466.73 532.09\">\n      <path\n        fill=\"currentColor\"\n        d=\"M457.43 125.94 244.42 2.96c-6.84-3.95-15.28-3.95-22.12 0L9.3 125.94C3.55 129.26 0 135.4 0 142.05v247.99c0 6.65 3.55 12.79 9.3 16.11l213.01 122.98c6.84 3.95 15.28 3.95 22.12 0l213.01-122.98c5.75-3.32 9.3-9.46 9.3-16.11V142.05c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05 151.99 238.42 508.15c-1.39 2.4-5.06 1.42-5.06-1.36V273.58c0-4.66-2.49-8.97-6.53-11.31L24.87 145.67c-2.4-1.39-1.42-5.06 1.36-5.06h411.26c5.84 0 9.49 6.33 6.57 11.39h-.01Z\"\n      />\n    </svg>\n  );\n}\n\nfunction ReactLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 256 228\" fill=\"none\">\n      <ellipse\n        cx=\"128\"\n        cy=\"114\"\n        rx=\"110\"\n        ry=\"42\"\n        stroke=\"currentColor\"\n        strokeWidth=\"14\"\n      />\n      <ellipse\n        cx=\"128\"\n        cy=\"114\"\n        rx=\"110\"\n        ry=\"42\"\n        stroke=\"currentColor\"\n        strokeWidth=\"14\"\n        transform=\"rotate(60 128 114)\"\n      />\n      <ellipse\n        cx=\"128\"\n        cy=\"114\"\n        rx=\"110\"\n        ry=\"42\"\n        stroke=\"currentColor\"\n        strokeWidth=\"14\"\n        transform=\"rotate(120 128 114)\"\n      />\n      <circle cx=\"128\" cy=\"114\" r=\"18\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction ShadcnLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 256 256\" fill=\"none\">\n      <path\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"25\"\n        d=\"M208 128l-80 80M192 40 40 192\"\n      />\n    </svg>\n  );\n}\n\nfunction ExpoLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} preserveAspectRatio=\"xMidYMid\" viewBox=\"0 0 256 231\">\n      <path\n        fill=\"currentColor\"\n        d=\"M121 85c2-3 5-4 7-4 1 0 5 1 7 4 16 22 43 67 63 101l26 40c7 8 18 3 24-6s8-15 8-22c0-4-88-168-97-182-9-13-11-16-26-16h-11c-14 0-16 3-25 16C88 30 0 194 0 198c0 7 2 13 8 22s17 14 24 6l26-40c20-34 47-79 63-101Z\"\n      />\n    </svg>\n  );\n}\n\nfunction AstroLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} fill=\"none\" viewBox=\"0 0 85 107\">\n      <path\n        fill=\"currentColor\"\n        d=\"M27.59 91.136c-4.834-4.418-6.246-13.703-4.232-20.429 3.492 4.241 8.33 5.584 13.342 6.343 7.737 1.17 15.336.732 22.523-2.804.822-.405 1.582-.943 2.48-1.489.675 1.957.85 3.932.615 5.943-.573 4.896-3.01 8.678-6.885 11.545-1.55 1.147-3.19 2.172-4.79 3.253-4.917 3.323-6.247 7.22-4.4 12.888.044.139.084.277.183.614-2.51-1.124-4.344-2.76-5.742-4.911-1.475-2.27-2.177-4.78-2.214-7.498-.019-1.322-.019-2.656-.197-3.96-.434-3.178-1.926-4.601-4.737-4.683-2.884-.084-5.166 1.699-5.771 4.507-.046.216-.113.429-.18.68l.004.001ZM0 69.587s14.314-6.973 28.668-6.973L39.49 29.12c.405-1.62 1.588-2.72 2.924-2.72 1.335 0 2.518 1.1 2.924 2.72L56.16 62.614c17 0 28.668 6.973 28.668 6.973S60.514 3.352 60.467 3.219C59.769 1.261 58.591 0 57.003 0H27.827c-1.588 0-2.718 1.261-3.464 3.22C24.311 3.35 0 69.586 0 69.586Z\"\n      />\n    </svg>\n  );\n}\n\nfunction LinearLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} fill=\"none\" viewBox=\"0 0 100 100\">\n      <path\n        fill=\"currentColor\"\n        d=\"M1.225 61.523c-.222-.949.908-1.546 1.597-.857l36.512 36.512c.69.69.092 1.82-.857 1.597-18.425-4.323-32.93-18.827-37.252-37.252ZM.002 46.889a.99.99 0 0 0 .29.76L52.35 99.71c.201.2.478.307.76.29 2.37-.149 4.695-.46 6.963-.927.765-.157 1.03-1.096.478-1.648L2.576 39.448c-.552-.551-1.491-.286-1.648.479a50.067 50.067 0 0 0-.926 6.962ZM4.21 29.705a.988.988 0 0 0 .208 1.1l64.776 64.776c.289.29.726.375 1.1.208a49.908 49.908 0 0 0 5.185-2.684.981.981 0 0 0 .183-1.54L8.436 24.336a.981.981 0 0 0-1.541.183 49.896 49.896 0 0 0-2.684 5.185Zm8.448-11.631a.986.986 0 0 1-.045-1.354C21.78 6.46 35.111 0 49.952 0 77.592 0 100 22.407 100 50.048c0 14.84-6.46 28.172-16.72 37.338a.986.986 0 0 1-1.354-.045L12.659 18.074Z\"\n      />\n    </svg>\n  );\n}\n\nfunction SupabaseLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 109 113\" fill=\"none\">\n      <path\n        fill=\"currentColor\"\n        d=\"M63.708 110.284c-2.86 3.601-8.658 1.628-8.727-2.97l-1.007-67.251h45.22c8.19 0 12.758 9.46 7.665 15.874l-43.151 54.347Z\"\n      />\n      <path\n        fill=\"currentColor\"\n        d=\"M45.317 2.071c2.86-3.601 8.658-1.628 8.726 2.97l.442 67.251H9.831c-8.19 0-12.759-9.46-7.665-15.874L45.317 2.071Z\"\n      />\n    </svg>\n  );\n}\n\nfunction ClerkLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} fill=\"none\" viewBox=\"0 0 128 128\">\n      <circle cx=\"64\" cy=\"64\" r=\"20\" fill=\"currentColor\" />\n      <path\n        fill=\"currentColor\"\n        d=\"M99.572 10.788c1.999 1.34 2.17 4.156.468 5.858L85.424 31.262c-1.32 1.32-3.37 1.53-5.033.678A35.846 35.846 0 0 0 64 28c-19.882 0-36 16.118-36 36a35.846 35.846 0 0 0 3.94 16.391c.851 1.663.643 3.712-.678 5.033L16.646 100.04c-1.702 1.702-4.519 1.531-5.858-.468C3.974 89.399 0 77.163 0 64 0 28.654 28.654 0 64 0c13.163 0 25.399 3.974 35.572 10.788ZM100.04 111.354c1.702 1.702 1.531 4.519-.468 5.858C89.399 124.026 77.164 128 64 128c-13.164 0-25.399-3.974-35.572-10.788-2-1.339-2.17-4.156-.468-5.858l14.615-14.616c1.322-1.32 3.37-1.53 5.033-.678A35.847 35.847 0 0 0 64 100a35.846 35.846 0 0 0 16.392-3.94c1.662-.852 3.712-.643 5.032.678l14.616 14.616Z\"\n      />\n    </svg>\n  );\n}\n\nfunction FigmaLogo(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg {...props} viewBox=\"0 0 54 80\" fill=\"none\">\n      <path\n        fill=\"currentColor\"\n        d=\"M13.333 80c7.36 0 13.334-5.973 13.334-13.333V53.333H13.333C5.973 53.333 0 59.307 0 66.667 0 74.027 5.973 80 13.333 80ZM0 40c0-7.36 5.973-13.333 13.333-13.333h13.334v26.666H13.333C5.973 53.333 0 47.36 0 40ZM0 13.333C0 5.973 5.973 0 13.333 0h13.334v26.667H13.333C5.973 26.667 0 20.693 0 13.333ZM26.667 0H40c7.36 0 13.333 5.973 13.333 13.333S47.36 26.667 40 26.667H26.667V0ZM53.333 40c0 7.36-5.973 13.333-13.333 13.333S26.667 47.36 26.667 40 32.64 26.667 40 26.667 53.333 32.64 53.333 40Z\"\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}