Marquee

Marquee duplicates children for a seamless CSS loop and hides the duplicate from assistive technology. It stops under reduced motion.

import { Badge, Marquee } from '@manti-ui/react';

const tags = [
  'Framework-agnostic',
  'Zag.js machines',
  'Design tokens',
  'light-dark()',
  'Monochrome',
  'Accessible',
];

export default function MarqueeBasic() {
  return (
    <Marquee>
      {tags.map((t) => (
        <Badge key={t} variant="secondary">
          {t}
        </Badge>
      ))}
    </Marquee>
  );
}

Direction

Use left, right, up, or down. Vertical marquees need a bounded height. speed is the duration of one pass.

Framework-agnosticZag.js machinesDesign tokensMonochromeAccessible

API

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to scroll. It is duplicated to make the loop seamless.
`direction`	`'left' \| 'right' \| 'up' \| 'down'`	`'left'`	Scroll direction. Vertical (`up`/`down`) needs the root to have a height.
`speed`	`number`	`20`	Seconds for one full loop. Higher is slower.
`pauseOnHover`	`boolean`	`true`	Pause the scroll while the pointer is over it.
`gap`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spacing between the repeated content.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="marquee"][data-part="root"]`	The clipping wrapper carrying direction, gap, and pause state.
`content`	`[data-scope="marquee"][data-part="content"]`	The translating track that holds both copies of the content.
`group`	`[data-scope="marquee"][data-part="group"]`	One copy of the content; the second copy is hidden from assistive tech.

Tokens

Token	Controls
`--manti-marquee-gap`	gap
`--manti-marquee-duration`	duration

Last updated 13 September 2026