Marquee

A row or column of items that drifts on a loop, for logo walls and showcases.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/marquee.json

Usage

import { Marquee } from "@/components/ui/marquee"

<Marquee pauseOnHover>
  {logos.map((logo) => (
    <IconTile key={logo.id}>{logo.mark}</IconTile>
  ))}
</Marquee>

The items are rendered twice and the track slides by one copy, so the loop has no seam. Give it enough items to be wider, or taller, than the space it fills. The copy is hidden from screen readers and cannot be focused.

Vertical

<Marquee orientation="vertical" reverse duration={50} className="h-96">
  {items}
</Marquee>

Several vertical marquees side by side, at different speeds and in opposite directions, make the logo wall on the Integrations template.

Props

orientation. "horizontal" (default) or "vertical".
reverse. Runs left to right, or top to bottom, instead.
duration. Seconds for one full loop. Defaults to 40.
gap. Pixels between items. Defaults to 16.
pauseOnHover. Stops while the pointer is over it.
fade. Fades the two ends. On by default.

The motion runs on the Web Animations API, so there is no CSS to add, and it holds still for people who prefer reduced motion.

Marker Menubar

On This Page

Installation Usage Vertical Props