NexoreUIv1.8.6
InstallationComponents61IconsTemplatesNEWNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
61 comps
Create Project
Studio
Installation
Components Overview
60+
Icons
300+
Categories6 groups
Button
Input
Checkbox
AI
Select
AI
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Aurora Border Card
AI
Aurora Search Pill
AI
AI Prompt Input
AI
Command
Interactive Code Block
AI
Pro AI
AI
Theme: cyan
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
1

Right Direction Marquee

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

High Speed Tech Grid

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

No Pause on Hover

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

Large Custom Gap

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

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.