Default
Substrate UINeobrutalismBold DesignSharp CornersHard ShadowsHigh Contrast
Substrate UINeobrutalismBold DesignSharp CornersHard ShadowsHigh Contrast
Fast Speed
Set speed=8 for a faster scroll.
BREAKING NEWSLIVE UPDATEJUST INALERTFLASH
BREAKING NEWSLIVE UPDATEJUST INALERTFLASH
Reversed
Set reverse to scroll right-to-left.
ReactNext.jsTailwindTypeScriptRadixStorybook
ReactNext.jsTailwindTypeScriptRadixStorybook
Pause on Hover
Hover over the marquee to pause the animation.
Hover to pauseRelease to resumeSmooth animationInteractive marquee
Hover to pauseRelease to resumeSmooth animationInteractive marquee
Props
| Prop | Type | Description |
|---|---|---|
| items | string[] | Array of text items to scroll |
| speed | number | Animation duration in seconds (default: 20) |
| pauseOnHover | boolean | Pause scrolling when hovering (default: false) |
| reverse | boolean | Reverse the scroll direction (default: false) |
| className | string | Additional classes on the root element |
Usage
<Marquee
items={["Item One", "Item Two", "Item Three"]}
speed={15}
pauseOnHover
reverse
/>