GitHub

Marquee

A component that displays a list of items in a scrolling container.

Docs API

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Installation

Usage

Accessibility

  • Enable pause-on-interaction: Use pauseOnInteraction so users can pause the animation on hover or focus, improving accessibility and readability.
  • Use descriptive labels: Add a meaningful aria-label that describes the marquee content (e.g. "Partner logos", "Latest announcements").
  • Avoid for critical information: Do not use marquees for content users must read. Moving text is hard to process; use static content for important information.

Orientation

Use the orientation prop to control the orientation of the marquee.

Horizontal

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Vertical

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Examples

Pause on hover

Use the pauseOnInteraction prop to pause the marquee on hover or focus.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Reverse

Use the reverse prop to scroll in the opposite direction.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Custom speed

Use the speed prop (pixels per second) to control scroll speed.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Auto fill

Use the autoFill prop to automatically duplicate content to fill the container.

Sponsor 1

Sponsor 2

Spacing

Use the spacing prop to control the gap between items.

Spacing is in multiples of 4px. Example: spacing={10} will set the spacing to 40px.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Fade

Use the showEdges prop to show or hide the gradient fade at the start and end of the marquee.

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

Sponsor 1

Sponsor 2

Sponsor 3

Sponsor 4

Sponsor 5

Sponsor 6

Sponsor 7

Sponsor 8

Sponsor 9

Sponsor 10

API Reference

Marquee

Root component for the scrolling marquee. Renders a div with viewport and content.

MarqueeItem

A single item in the marquee. Renders an item element.

For a complete list of props, see the Ark UI documentation.