Logo Marquee
Free
An endless row of logos with faded edges that slows to a stop on hover.
Trusted by studios everywhere
Over 4,000 teams ship with us
- Brightloom
- Quillmark
- HALVARD
- Oakhollow
- nimbra
- Kitefold
- Saltmere
- Vellum Labs
- Vellum Labs
- Saltmere
- Kitefold
- nimbra
- Oakhollow
- HALVARD
- Quillmark
- Brightloom
Customize
40
Direction
Pause on hover
Faded edges
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/logo-marquee.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/logo-marquee.tsx.
Usage
import { LogoMarquee } from "@/components/ui/logo-marquee";
<LogoMarquee
items={partners.map((p) => <img key={p.name} src={p.logo} alt={p.name} className="h-6" />)}
speed={40}
direction="left"
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | — | Logos or any other items to scroll. |
| speed | number | 40 | Scroll speed in pixels per second. |
| direction | "left" | "right" | "left" | Which way the row moves. |
| pauseOnHover | boolean | true | Ease to a stop while the pointer or keyboard focus is on the row. |
| gap | number | 48 | Space between items, in pixels. |
| fade | boolean | true | Fade the row out at both edges. |
| className | string | — | Extra classes for the row. |
Dependencies: motion