LogoMarquee

A scrolling or static row of partner logos.

Trusted by teams at

NorthwindGlobexInitechContoso
<LogoMarquee.Root>
	<LogoMarquee.Title>Ils nous font confiance</LogoMarquee.Title>
	<LogoMarquee.Viewport>
		<LogoMarquee.Track duration={30}>
			<LogoMarquee.Item src={logo} alt="Northwind" />
		</LogoMarquee.Track>
	</LogoMarquee.Viewport>
</LogoMarquee.Root>

Track duplicates its children to make the loop seamless. For a handful of logos that fit on one line, swap it for StaticTrack and drop the viewport.

Reference brands

NorthwindGlobexInitechContoso

API

LogoMarquee.Root

Plus every <div> prop. Source: landing/components/logo-marquee/root.tsx.

LogoMarquee.Item

PropTypeDefault
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <img> prop. Source: landing/components/logo-marquee/item.tsx.

LogoMarquee.StaticTrack

Plus every <div> prop. Source: landing/components/logo-marquee/static-track.tsx.

LogoMarquee.Title

Plus every <p> prop. Source: landing/components/logo-marquee/title.tsx.

LogoMarquee.Track

PropTypeDefault
durationnumber30Seconds for one loop of the marquee.

Plus every <div> prop. Source: landing/components/logo-marquee/track.tsx.

LogoMarquee.Viewport

Plus every <div> prop. Source: landing/components/logo-marquee/viewport.tsx.