Marquee

A continuous scrolling component for displaying content in a seamless loop.

Anatomy

<Marquee.Root>
  <Marquee.Edge />
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>

Examples

Auto Fill

Use the autoFill prop to automatically duplicate content to fill the viewport. The spacing prop controls the gap between duplicated content instances:

Reverse

Set the reverse prop to reverse the scroll direction:

Vertical

Set side="bottom" (or side="top") to create a vertical marquee:

Speed

Control the animation speed using the speed prop, which accepts values in pixels per second:

Pause on Interaction

Enable pauseOnInteraction to pause the marquee when users hover or focus on it, improving accessibility:

Programmatic Control

Use the useMarquee hook with Marquee.RootProvider to access the marquee API and control playback programmatically:

If you're using the Marquee.RootProvider component, you don't need to use the Marquee.Root component.

Loops

Set the loopCount prop to run the marquee a specific number of times. Use onLoopComplete to track each loop iteration and onComplete to know when all loops finish:

Edges

Add Marquee.Edge components to create fade effects at the start and end of the scrolling area:

Guides

Content Animation

The Marquee component requires CSS keyframe animations to function properly. You'll need to define animations for both horizontal and vertical scrolling:

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-translate));
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--marquee-translate));
  }
}

The component automatically applies the appropriate animation (marqueeX or marqueeY) based on the scroll direction and uses the --marquee-translate CSS variable for seamless looping.

You can target specific parts of the marquee using data-part attributes for custom styling:

• [data-part="root"] - The root container
• [data-part="viewport"] - The scrolling viewport
• [data-part="content"] - The content wrapper (receives animation)
• [data-part="item"] - Individual marquee items
• [data-part="edge"] - Edge gradient overlays

Best Practices

• Enable pause-on-interaction: Use pauseOnInteraction to allow users to pause animations on hover or focus, improving accessibility and readability
• Use descriptive labels: Provide meaningful aria-label values that describe the marquee content (e.g., "Partner logos", "Latest announcements")
• Avoid for critical information: Don't use marquees for essential content that users must read, as continuously moving text can be difficult to process. Consider static displays for important information

API Reference

Props

Root

Renders a <div> element.

Content

Renders a <div> element.

Edge

Renders a <div> element.

Item

Renders a <div> element.

RootProvider

Renders a <div> element.

Viewport

Renders a <div> element.

Context

API