Installation

pnpm dlx shadcn@latest add "https://godui.design/r/marquee.json"

Marquee duplicates its children into a seamless looping track. The animation is pure CSS, so it stays smooth even with many items, and respects prefers-reduced-motion.

Usage

tsx

import { Marquee } from "@/components/godui/marquee";

tsx

<Marquee>
  {items.map((item) => (
    <Card key={item.id} {...item} />
  ))}
</Marquee>

Direction

"left" / "right" scroll horizontally; "up" / "down" scroll vertically (give the marquee a fixed height).

tsx

<Marquee direction="right" />
<Marquee direction="up" className="h-96" />

Speed

speed is the loop duration in seconds — higher is slower.

tsx

<Marquee speed={15} />

Examples

Reverse direction

DesignEngineeringMotionCraftDetailSystems

Vertical

Give a vertical marquee a fixed height; it scrolls along the column.

Smoothest UI all year

Spring physics done right

It just worked

Feels premium

Shipped in a day

Props

Prop	Type	Default	Description
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	Scroll direction.
`speed`	`number`	`40`	Loop duration in seconds — higher is slower.
`pauseOnHover`	`boolean`	`true`	Pause while the pointer is over the marquee.
`fade`	`boolean`	`true`	Fade the leading and trailing edges.
`repeat`	`number`	`4`	Times the children are duplicated to fill the track.

Marquee also forwards every standard <div> attribute to the root element.

Marquee

On this page