Usage
import { Marquee } from "@/registry/components/marquee/marquee";
<Marquee>Label</Marquee>Props
| Prop | Type | Default | Description |
|---|---|---|---|
reverse? | boolean | false | Run right to left (or bottom to top) instead. |
pauseOnHover? | boolean | false | Pause while the pointer is over the marquee. |
children | ReactNode | ||
vertical? | boolean | false | Scroll vertically. |
repeat? | number | 4 | How many copies of the content to lay out, so the loop never shows a gap. |
duration? | number | 40 | Seconds per loop. |
gap? | string | "1rem" | Gap between items, any CSS length. |
fade? | boolean | true | Fade the edges into the background. |
Also accepts every prop of ComponentPropsWithoutRef<"div">.
When to use
Endless tickers for text, quotes or small cards.
When not to use
Logos specifically (logo-marquee has better hover/scrub) or essential content users must read.