NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsMarquee

Marquee

Scrolling marquee text and content.

Next ComponentNumber Ticker

Marquee

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

Interactive Playground

Marquee Playground
nexoreui
Live Preview
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
ReactTypeScriptTailwindCSSFramer MotionRadix UINext.jsViteHTML5CSS3
Props Panel
number

Animation speed (represented as pixels per second/rate)

select

Direction in which the marquee scrolls

boolean

Pause the scrolling motion when hovering

number

Gap in pixels between children items

Generated Code
Open in GitHub
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.