Logo Cloud Switch
Logo clouds
Source and install need .
pnpm dlx shadcn@latest add @assembli/logo-marqueeLogo Marquee
"Trusted by" logo strip that scrolls forever in one or two rows running opposite ways. Each row is measured and repeated just enough to cover the frame, so the loop never gaps at any width. Hovering eases the strip to a crawl and lifts the logo under the pointer while the rest dim; a pause button stops it, and reduced motion lays the logos out still.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
title
React.ReactNode
Default
"Trusted by teams at"Short line above the strip, e.g. "Trusted by 4,000+ teams".
link
{ label: string; href: string }
A link beside the title, e.g. to customer stories.
logos*
LogoMarqueeItem[]
rows
1 | 2
Default
1Splits the logos into two rows that run in opposite directions.
speed
number
Default
40Pixels per second.
hover
"slow" | "pause"
Default
"slow"Slows the strip to a crawl while the pointer is over it, instead of stopping.
pauseButton
boolean
Default
trueShows a pause button, so the motion can be stopped (WCAG 2.2.2).
| Description | |||
|---|---|---|---|
| title | React.ReactNode | "Trusted by teams at" | Short line above the strip, e.g. "Trusted by 4,000+ teams". |
| link | { label: string; href: string } | – | A link beside the title, e.g. to customer stories. |
| logos* | LogoMarqueeItem[] | – | |
| rows | 1 | 2 | 1 | Splits the logos into two rows that run in opposite directions. |
| speed | number | 40 | Pixels per second. |
| hover | "slow" | "pause" | "slow" | Slows the strip to a crawl while the pointer is over it, instead of stopping. |
| pauseButton | boolean | true | Shows a pause button, so the motion can be stopped (WCAG 2.2.2). |
