Logo Cloud

Why it matters

A logo strip is one of the cheapest trust signals you can add to a landing page. If you have real customers with recognizable brands, show their logos. If you are early, show the tech stack your product is built on — it signals quality and credibility to technical buyers without needing social proof you haven't earned yet.

The section hides itself automatically when show is false or the items array is empty — no conditional rendering needed on your end.

Usage

import LogoCloud from "@/components/LogoCloud";

<LogoCloud />

Configuration

logoCloud: {
  show: true,
  useMonochrome: true,
  shouldRoll: true,
  items: [
    { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/stripe.svg" },
    { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/supabase.svg", scale: 1.1 },
    { src: "/logos/yourlogo.svg", scale: 0.9 },
  ],
},

Section fields

• show — set to false to hide the entire section globally without removing it from your page.
• useMonochrome — when true, all logos are converted to grayscale and rendered at reduced opacity. This keeps the section visually quiet and prevents a wall of competing brand colors from clashing with your design. When false, logos render in their original colors.
• shouldRoll — when true, logos animate in a continuous horizontal marquee (the list is duplicated internally to create a seamless loop). When false, the logos are laid out as a static centered row — and the component hard-caps the display at the first 5 items regardless of how many you add. If you have more than 5 logos, set shouldRoll: true.
• items — an array of logo objects. Each item has a src and an optional scale.

Item fields

• src — the image path. Accepts two formats: a local path relative to /public (e.g. "/logos/stripe.svg" maps to public/logos/stripe.svg), or a full external URL (e.g. a jsDelivr CDN link). SVGs scale cleanly at any size — prefer them over PNGs. If the image fails to load, the slot disappears silently rather than showing a broken image.
• scale — optional number used as a CSS transform: scale() multiplier. Use it to normalize logos that are noticeably larger or smaller than the others. A value of 1.2 makes the logo 20% larger; 0.85 makes it 15% smaller. Most logos won't need this — only reach for it when something looks obviously out of proportion.