Logo Marquee React component
An infinite scrolling row of client/partner logos with edge fade masks, grayscale-to-color hover reveal, pause-on-hover, and a constant speed regardless of logo count.
About the Logo Marquee component
Logo Marquee is a free, endlessly scrolling row of client or partner logos. Logos show in grayscale and turn to full color and scale up under the cursor, the row pauses on hover, and both edges fade out with a mask and an optional blur.
logos take name, image, link and an optional per-logo height and imageScale; logos without an image show their name as text. speed is in pixels per second (60), so the pace stays the same however many logos you add, and logoHeight, gap, direction, hoverScale, fadeWidth and the grayscale, hoverReveal, edgeFade and edgeBlur switches cover the styling. The duplicated copy used for the seamless loop is hidden from screen readers.
When to use it
Use it in a "trusted by" strip under a hero, on pricing pages or in footers, where a single compact row of logos is enough.
For a circular layout, use Logo Spin or Orbit Logo Wheel; for scrolling cards or text, use Infinite Marquee.
Installation
Add the Logo Marquee component to your project with the shadcn CLI. It lands in components/logo-marquee.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/logo-marqueeOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<LogoMarquee /> accepts 14 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| logos | { image?: string; name: string; link?: string; height?: number; imageScale?: number }[] | DEFAULT_LOGOS |
| logoHeight | number | 36 |
| gap | number | 64 |
| direction | "left" | "right" | "left" |
| speed | number | 60 |
| pauseOnHover | boolean | true |
| grayscale | boolean | true |
| hoverReveal | boolean | true |
| hoverScale | number | 1.1 |
| edgeFade | boolean | true |
| edgeBlur | boolean | true |
| fadeWidth | number | 80 |
- logos{ image?: string; name: string; link?: string; height?: number; imageScale?: number }[]Default: DEFAULT_LOGOS
- logoHeightnumberDefault: 36
- gapnumberDefault: 64
- direction"left" | "right"Default: "left"
- speednumberDefault: 60
- pauseOnHoverbooleanDefault: true
- grayscalebooleanDefault: true
- hoverRevealbooleanDefault: true
- hoverScalenumberDefault: 1.1
- edgeFadebooleanDefault: true
- edgeBlurbooleanDefault: true
- fadeWidthnumberDefault: 80
Show all 14 propsShow fewer
| transparentBackground | boolean | true |
| backgroundColor | string | "#ffffff" |
- transparentBackgroundbooleanDefault: true
- backgroundColorstringDefault: "#ffffff"
Collections
Use-case pages that compare Logo Marquee with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Logo Marquee FAQ
- How do I make it faster?
- Raise speed, which is measured in pixels per second; the default is 60.
- How do I show logos in full color?
- Set grayscale={false}. With grayscale on, hoverReveal decides whether hovering restores the color.
- Can the row scroll to the right?
- Yes, direction="right".
- Why is my text logo white?
- Logos without an image render their name in a light color meant for dark backgrounds; pass image to use real logo files.
