How to make an infinite logo marquee in React and Tailwind

A row of client logos that scrolls forever is the most common trust signal on a landing page. Getting the loop right (no jump when it restarts, no gap at the end) takes a little care. This tutorial uses ReactFrame's free Logo Marquee.

1. Install

npx shadcn@latest add @reactframe/logo-marquee

2. Pass your logos

import { LogoMarquee } from "@/components/logo-marquee";

const logos = [
  { name: "Acme", image: "/logos/acme.svg", link: "https://acme.com" },
  { name: "Globex", image: "/logos/globex.svg" },
  { name: "Initech", image: "/logos/initech.svg", imageScale: 90 },
  { name: "Umbrella", image: "/logos/umbrella.svg" },
];

export function Clients() {
  return (
    <section className="py-16">
      <p className="mb-8 text-center text-sm text-neutral-500">Trusted by teams at</p>
      <LogoMarquee logos={logos} />
    </section>
  );
}

A logo without an image shows its name as text, which is handy while you're still collecting files. imageScale (a percentage) evens out logos that look bigger or smaller than the rest, and link makes a logo clickable.

3. Tune it

Tips for logos that look right

• Use SVGs where you can; they stay sharp at any size.
• Match the visual weight, not the pixel size. Wordmarks usually need a smaller imageScale than square icons.
• Get permission before showing a customer's logo, and keep a text fallback for the ones still in review.
• Two rows going opposite ways (direction="left" and "right") fill a wide section nicely.

Related

For a static trust bar with logos and a short quote, see Testimonial Logos. To scroll anything else (cards, quotes, product shots), use Infinite Marquee. Both are free.