Marquee

Display logos, images, or text in a continuous horizontal or vertical scroll.

Usage

Use Marquee to continuously scroll a sequence of logos, images, or short text snippets when space is limited. It’s well-suited for brand walls, partner showcases, and news tickers, but should not be used for critical reading content.

import { Marquee } from "@elemnts-ui/react";

<Marquee>
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item>Item 1</Marquee.Item>
      <Marquee.Item>Item 2</Marquee.Item>
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee>;

Reversed

Use the reverse prop to make the marquee scroll in the opposite direction.

Vertical

Use the side prop with top or bottom values to make the marquee scroll vertically.

Edges

Use the Marquee.Edge component to add a subtle gradient overlay to the edges of the marquee.

API Reference

Marquee

The root component for the marquee.

Prop	Type	Default
asChild	`boolean`	`false`
autoFill	`boolean`	`false`
defaultPaused	`boolean`	`false`
delay	`number`	`0`
ids	`Partial<{ root: string; viewport: string; content: (index: number) => string }>`	-
loopCount	`number`	`0`
onComplete	`() => void`	-
onLoopComplete	`() => void`	-
onPauseChange	`(details: PauseStatusDetails) => void`	-
paused	`boolean`	-
pauseOnInteraction	`boolean`	`false`
reverse	`boolean`	`false`
side	`Side`	`"start"`
spacing	`string`	`"1rem"`
speed	`number`	`50`
translations	`IntlTranslations`	-

MarqueeRootProvider

Provides a marquee state machine to its children.

Prop	Type	Default
value	`UseMarqueeReturn`	required
asChild	`boolean`	`false`

MarqueeContent

Wraps the marquee items.

Prop	Type	Default
asChild	`boolean`	`false`

MarqueeViewport

Clips the scrolling marquee content.

Prop	Type	Default
asChild	`boolean`	`false`

MarqueeEdge

Renders a gradient overlay at an edge of the marquee.

Prop	Type	Default
side	`Side`	required
asChild	`boolean`	`false`

MarqueeItem

Wraps an individual marquee item.

Prop	Type	Default
asChild	`boolean`	`false`

Variables

Variable	Description
`--marquee-duration`	Animation duration
`--marquee-spacing`	Spacing between marquee items
`--marquee-delay`	Animation delay before starting
`--marquee-loop-count`	Number of animation iterations
`--marquee-translate`	Marquee translation distance