Marquee

Pro

Endlessly scrolling strip of content with soft faded edges. Press and hold to ease it gently to a stop so you can read an item; let go and it picks back up.

Preview

Installation

npx @lumioui/cli add pro/marquee

Usage

import { Marquee } from "@/components/ui/marquee/marquee";
<Marquee />

Examples

Reverse

A reading app's onboarding: two rows of genres drift in opposite directions.

Ticker

The quote strip under a brokerage app's portfolio header.

API reference

Marquee

Prop Type Default
children* React.ReactNode —
direction "left" | "right"

Scroll direction. Default "left".

 —
speed number

Scroll speed in px/sec. Default 48.

 —
spacing number

Gap between loop copies in px. Default 32.

 —
pauseOnPress boolean

Hold the strip to ease it to a stop; release resumes from where it rested. Default true.

 —
playing boolean

Run the loop. Default true. Turning it off coasts the strip to rest.

 —
fadeEdges boolean

Gradient fades on both edges. Default true.

 —
fadeWidth number

Fade width in px. Default 24.

 —
fadeColor string

Fade tint — defaults to the theme card color.

 —
contentClassName string

Classes for each content copy's row.

 —
accessibilityLabel string

Label announced for the whole strip (role "text"). Tiled loop copies after the first stay hidden, so the content is never read twice.

 —
className string —

MarqueeItem

Prop Type Default
className string —