Marquee

A row of logos or items that scrolls without end.

import { Marquee } from 'components/UI/Marquee'

Customer logos

The row scrolls at a constant speed.

The second row moves in the opposite direction. Keyboard focus pauses both rows.

Product analyticsSession replayFeature flagsExperimentsSurveysError tracking

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Put only decorative content that repeats in a marquee, such as customer logos. Do not put content that users must read or click in it.
Children are copied to fill the row. Do not put IDs or autoplaying media in them.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
children	ReactNode	–	The logo, tool, or fact items.
label	string	–	Names the scroll region for screen readers.
direction	'left' \| 'right'	'left'	Sets the direction.
speed	number	40	Sets pixels per second. Zero disables motion.
gap	number	32	Sets the gap in pixels.
edgeFade	boolean	true	Adds a static edge mask while motion is enabled.
pauseOnHover	boolean	true	Pauses motion while the pointer is over the row. Focus always pauses motion.
secondRow	ReactNode	–	Adds a second row with the opposite direction. Focus within either row pauses both rows.
className	string	–	Adds classes to the outer element.