Browse components
Marquee
Infinite logo loop that eases to a stop on hover, grows the logo under the cursor and fades its edges. Works with any content.
Installation
npx shadcn@latest add @glint-ui/marqueeFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/marquee.json
Usage
import { Marquee } from "@/components/ui/marquee";
<Marquee
items={logos.map((l) => <img key={l.name} src={l.src} alt={l.name} className="h-8" />)}
speed={60}
hoverSpeed={0}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of nodes to loop (logos, text, cards). |
| speed | number | 60 | Scroll speed in px per second. |
| hoverSpeed | number | 0 | Speed while hovered, px per second. 0 glides to a stop. |
| direction | "left" | "right" | "left" | Scroll direction. |
| gap | number | 48 | Px between items. |
| scaleOnHover | boolean | true | Grow the hovered item. |
| fadeEdges | boolean | true | Fade out both edges. |
| ariaLabel | string | "Logos" | Accessible name for the list. |
| className | string | — | Extra classes for the root element. |