Loading…

Marquee

beta

Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add marquee

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Marquee } from "@/components/ui/marquee";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Vertical
Repeat
With Pause Control
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Marquee>

Prop	Type	Default
`gap` Space between items, and between the last item and the first again. Numbers are px.	`number \| string`	`16`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`paused` Pauses it outright — wire this to a visible pause control.	`boolean`	`false`
`pauseOnHover` Pauses while the pointer is over the marquee or focus is inside it.	`boolean`	`true`
`repeat` How many times to repeat the content inside each half, for content shorter than the viewport. Repeats are hidden from assistive technology.	`number`	`1`
`reverse` Runs toward the inline end (or downward) instead of toward the start (or upward).	`boolean`	`false`
`speed` Pixels per second. Converted to a duration from the measured length of the content.	`number`	`50`
`children`	`ReactNode`	—

Plus every attribute of <div>.

Accessibility

The content is rendered once for assistive technology: the copy that closes the loop, and any `repeat` copies, are aria-hidden and inert, so nothing is announced or focused twice. It pauses while hovered or while focus is inside it, and `paused` stops it outright for a visible pause control (WCAG 2.2.2). Under prefers-reduced-motion it stops and becomes an ordinary, keyboard-focusable scroller. The loop runs toward the inline start, so it mirrors under dir="rtl".

Quality

Measured from the source and its tests at build time.

All scores

7/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

gap

Space between items, and between the last item and the first again. Numbers are px.

number | string

16

orientation

"horizontal" | "vertical"

"horizontal"

paused

Pauses it outright — wire this to a visible pause control.

boolean

false

pauseOnHover

Pauses while the pointer is over the marquee or focus is inside it.

boolean

true

repeat

How many times to repeat the content inside each half, for content shorter than the viewport. Repeats are hidden from assistive technology.

number

1

reverse

Runs toward the inline end (or downward) instead of toward the start (or upward).

boolean

false

speed

Pixels per second. Converted to a duration from the measured length of the content.

number

50

children

ReactNode

—