NexoreUIv1.4
InstallationComponents41IconsNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
41 comps
Create Project
Studio
Installation
Components Overview
40+
Icons
300+
Categories6 groups
Button
Input
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Thinking Indicator
AI
Tool Call Card
AI
Agent Status Pill
AI
Command
Theme: indigo
Studio
DocsMarquee

Marquee

Scrolling marquee text and content.

NextNumber Ticker
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Marquee

Infinite auto-scrolling container that runs smoothly at high frame rates.

Interactive Playground

Live CanvasInteractive
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
Controls(4)
speed
number

Animation speed (represented as pixels per second/rate)

direction
select

Direction in which the marquee scrolls

pauseOnHover
boolean
Toggle state:

Pause the scrolling motion when hovering

gap
number

Gap in pixels between children items

Generated JSX
Source
import { Marquee } from "nexoreui"

<Marquee />

Default Left Marquee

ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
component.tsx

Right Direction Marquee

ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
component.tsx

High Speed Tech Grid

ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
component.tsx

No Pause on Hover

ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
component.tsx

Large Custom Gap

ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
component.tsx

API Reference

PropertyTypeDefaultDescription
childrenReactNode-Content inside the marquee.
speednumber40Scrolling velocity multiplier.
direction"left" | "right""left"Scroll direction.
pauseOnHoverbooleantrueWhether scrolling pauses on cursor hover.
gapnumber16Gap in pixels between children.