Marquees

Scrolls each row of content horizontally in a continuous loop. Provide rows through the items array; each item's children is one scrolling track. By default it auto-fills the width and pauses on hover.

With pauseOnHover enabled, the animation stays paused while the pointer is over the container or keyboard focus is inside it. Moving focus between links inside does not resume scrolling. Scrolling resumes once both the pointer and focus leave. Set pauseOnHover={false} to disable both automatic pause triggers. A row's pauseOnHover can enable the same behavior for that row while container pausing is disabled.

import { Marquees } from '@jbpark/ui-kit';

<Marquees
  speed={40}
  gap={12}
  items={[{ key: 0, children: <div>Scrolling content</div> }]}
/>;

ReactTypeScriptViteTailwindDocusaurus

Props

Prop	Type	Default
`items`	`ItemProps[]`	-
`speed`	`number` (px/second)	`100`
`pauseOnHover`	`boolean`	`true`
`autoFill`	`boolean \| number`	`true`
`gap`	`number` (px)	`0`
`className`	`string`	-

Each ItemProps is { key?; children; speed?; autoFill?; pauseOnHover?; gap? } — per-row overrides fall back to the values set on Marquees. autoFill repeats each row enough to cover the container (pass a number to force a specific repeat count). gap is the space between those repeats — set it to match the spacing inside your row, otherwise the last element of one copy sits flush against the first element of the next. Marquees.Item is also exported for rendering a single track directly. Marquees forwards the rest of React.ComponentProps<'div'>.

Props​

Props