Marquee

Create a continuous scrolling display of logos, images, or text horizontally or vertically.

AI TipWant to skip the docs? Use the MCP Server

Usage

import { Marquee } from "@chakra-ui/react"

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

Examples

Reversed

Use the reverse prop on the Marquee.Root component to reverse the direction of the marquee.

Vertical Animation

To animate content along the Y axis, use the side prop and set it to bottom.

Speed

Use the speed prop to control the animation speed in pixels per second.

Slow (25px/s)

Normal (50px/s)

Fast (100px/s)

Pause On Interaction

Use the pauseOnInteraction prop to pause the animation when the user hovers or focuses the marquee.

Store

Use the Marquee.RootProvider and useMarquee hook to provide the marquee instance to the component and control the animation state programmatically.

To loop the marquee a finite number of times, set the loopCount prop on Marquee.Root. Alternatively, use the onLoopComplete and onComplete callbacks to track the number of completed loops or when the animation fully finishes.

<Marquee.Root
  loopCount={3}
  onLoopComplete={() => {
    /* handle loop completion */
  }}
  onComplete={() => {
    /* handle animation end */
  }}
>
  {/* Marquee.Item elements */}
</Marquee.Root>

Loop completed: 0 times

Animation completed: 0 times

Edge Gradient

Render the Marquee.Edge component to apply an edge fade.

Multiple

Here's an example of how to render alternating marquee components.

Diagonal

Here's an example of how to animate content diagonally using the marquee component.

Chakra Conf 2026

News Ticker

Here's an example of how to implement a news ticker with the marquee component.

Testimonials

You can display testimonials with the marquee component.

"This library saved me weeks of work. The components are accessible and easy to customize."

Sarah Chen

Product Designer

"The animations are buttery smooth. I love how easy it is to implement the marquee."

Michael Torres

Frontend Dev

"Scalable, reliable, and beautiful. Highly recommended for any modern web project."

Emily Wang

CTO

"Our conversion rates increased by 15% after switching to this UI system."

David Smith

Marketing Lead

"Documentation is top-notch. I was able to build my MVP in a single weekend."

Jessica Lee

Indie Hacker