Marquee
.mdInfinite horizontal scroller with faded edges that loops any content, runs in either direction and pauses on hover.
marqueetickerlogo cloudtestimonialsinfinite scrollcarousel
Installation
$npx shadcn@latest add @geturui/marquee
Usage
usage.tsx
1import { Marquee } from "@/components/ui/marquee";
2
3const logos = ["Ledgerline", "Orbit", "Fieldnote", "Quill", "Tidepool"];
4
5export function LogoCloud() {
6 return (
7 <Marquee duration={30}>
8 {logos.map((name) => (
9 <span key={name} className="text-lg font-semibold text-ink-muted">
10 {name}
11 </span>
12 ))}
13 </Marquee>
14 );
15}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Items for one loop. They're duplicated once to make it seamless. |
duration | number | 40 | Seconds per loop; higher is slower. |
reverse | boolean | false | Scroll left to right instead. |
pauseOnHover | boolean | true | Pause while the pointer is over it. |
className | string | — | Classes for the outer track. |
Accessibility
- The duplicate copy that makes the loop seamless is aria-hidden, so content is announced once.
- Stops completely under prefers-reduced-motion.
- Pauses on hover so people can read a card; avoid putting the only copy of important links inside it.