NexoreUI
2.0
InstallationComponentsIconsTemplatesNewNexore MakePricing
Create Project
GitHub
NexoreUI
2.0
Navigation
InstallationComponentsIconsTemplatesNexore MakeCreate Project
InstallationComponents OverviewIcons
Categories (65)
ButtonInputCheckboxSelectSwitchSliderRatingFile Upload
CardAccordionTabsTableStepperScroll AreaNavigationDockData DisplayChartsCommerce
Modal (Dialog)AlertBadgeAvatarTooltipProgressSkeletonLoadersToasterSocial
Aurora Border CardAurora Search PillAI Prompt InputCommandInteractive Code BlockPro AI
Media ShowcaseOverlays & DrawersPro ButtonsPro DashboardsPro E-CommercePro FeedbackPro FormsPro InputsPro LayoutsPro ListsPro MarketingPro NavigationPro TablesSpecial FormsUltra Components
OverviewPro CardsPro ObjectsSoundPulseSilkUnveilNode Flow Graph
NexoreUI v2.0Studio
DocsMarquee

Marquee

Scrolling marquee text and content.

PreviousCommand
NextNumber Ticker
On This Page
Quick ActionsProject StudioNewNexore 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.