Marquee

Navigation

An infinite horizontal scrolling strip of content.

Marquee duplicates its children twice and animates the pair across the width. Tweak the speed, reverse the direction, or pause on hover.

npx shadcn@latest add marquee

Default

A row of feature pills scrolls continuously.

Preview

Live

FastScalableModularComposableAccessibleThemableDocumentedFree

tsx

1<Marquee speed={20}>
2  <MarqueePill icon={Zap} label="Fast" />
3  <MarqueePill icon={Rocket} label="Scalable" />
4</Marquee>

Set reverse to scroll in the opposite direction.

Preview

Live

FastScalableModularComposableAccessibleThemableDocumentedFree

tsx

1<Marquee reverse speed={18}>...</Marquee>

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
speed	number= 30	Duration in seconds for one full loop.
reverse	boolean= false	Scrolls the marquee in reverse.
pauseOnHover	boolean= true	Pauses the animation while hovered.