Marquee
Duplicates the visual item set for continuous movement while hiding the second copy from assistive technology. Users can pause or resume movement, and prefers-reduced-motion stops the animation automatically.
@neumorphism-ui/marqueePreview
AccessibilityBase UIReact 19Tailwind 4
Installation
Installation: marquee
npx shadcn@latest add @neumorphism-ui/marqueeThe CLI resolves npm dependencies, base tokens, utilities, and component source in order.
New to this Registry? Set up the namespace before continuing.
Usage
Import
Marquee import code
"use client";
import { Marquee } from "@/components/ui/marquee";Example
Marquee usage code
export default function Example() {
return <Marquee items={["Accessibility", "Base UI", "React 19", "Tailwind 4"]} label="Supported technologies" />;
}API Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Marquee | itemsrequired | readonly ReactNode[] | — | The items that repeat through the strip. |
Marquee | duration | number | 24 | Sets one animation cycle in seconds. |
Marquee | defaultPaused | boolean | false | Starts the component in a paused state. |
Marquee | label | string | "Scrolling content" | Names the repeating information region. |
Marquee | pauseLabel / resumeLabel | string | — | Localizes the accessible names of the motion control button. |
Accessibility
- 01
The second visual copy is aria-hidden so screen readers do not announce every item twice.
- 02
Always provide a user-controlled pause button and expose its state with aria-pressed.
- 03
prefers-reduced-motion removes the movement and hides the duplicate item set.