React Fast Marquee

The Kibo UI marquee composes a wrapper, scrolling content, items and optional edge fades around react-fast-marquee. This imported version scrolls items; it does not implement drag-and-drop or item reordering.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

Choose it for a horizontal logo strip when your project already uses react-fast-marquee and you want separate components for spacing and left/right fades.

Before you copy and paste

Add the Kibo UI source and cn utility from the Code tab, and install react-fast-marquee. Put animation props on MarqueeContent; Marquee itself is the outer div wrapper.

Listed package dependencies: react-fast-marquee.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

Compose scrolling items and optional edge fades

"use client";

import {
  Marquee, MarqueeContent, MarqueeFade, MarqueeItem,
} from "@/components/kibo-ui/marquee";

const tools = ["GitHub", "Linear", "Figma"];

export function ComposedToolStrip() {
  return (
    <section aria-label="Example tools">
      <p className="sr-only motion-reduce:not-sr-only">GitHub, Linear and Figma.</p>
      <Marquee aria-hidden="true" className="motion-reduce:hidden">
        <MarqueeContent speed={30} pauseOnHover autoFill>
          {tools.map((tool) => <MarqueeItem key={tool}>{tool}</MarqueeItem>)}
        </MarqueeContent>
        <MarqueeFade side="left" className="pointer-events-none" />
        <MarqueeFade side="right" className="pointer-events-none" />
      </Marquee>
    </section>
  );
}

MarqueeContent forwards the dependency’s animation props. Its speed is pixels per second, so increasing it moves content faster—the opposite of the beUI marquee’s duration setting.

Customization

MarqueeContent: Extends react-fast-marquee props. The wrapper defaults autoFill and pauseOnHover to true and loop to zero for continuous scrolling.
speed / play / direction: These belong on MarqueeContent. Speed is pixels per second, play controls whether the track runs, and direction comes from the dependency’s API.
MarqueeItem / MarqueeFade: Items supply horizontal spacing. Fade takes side="left" or side="right". Omit the fades for a fully visible edge, or make them pointer-events-none as shown.

Integration notes

autoFill can create repeated content. The decorative example supplies one static text alternative; avoid repeated interactive links without checking the dependency’s focus behaviour.
Use play with an accessible pause button if users need to stop the strip. Add your own reduced-motion handling; this wrapper does not read the preference.
For draggable work items, use the Kanban component instead. The upstream prose mentions drag interactions, but those are absent from the shipped marquee source.

Component source: Kibo UI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.