1. framework components
  2. ›
  3. marquee

Marquee

Auto-scrolls content like logos, announcements, or featured items.

Warning

This feature is currently marked as beta. Take caution when using for production. It may receive breaking changes before its stable release.

🐉Dragon
🧙Wizard
⚔️Knight
💀Skeleton
🏰Castle
🧝Elf
🗡️Rogue
🛡️Paladin

Usage

Access contentCount via Marquee.Context to render the correct number of content blocks. Zag handles duplication for seamless looping — your items only need to be written once inside Marquee.Content.

svelte 
<Marquee autoFill pauseOnInteraction>
	<Marquee.Edge side="start" />
	<Marquee.Viewport>
		<Marquee.Context>
			{#snippet children(marquee)}
				{#each Array.from({ length: marquee().contentCount }) as _, index}
					<Marquee.Content {index}>
						<!-- items here -->
					</Marquee.Content>
				{/each}
			{/snippet}
		</Marquee.Context>
	</Marquee.Viewport>
	<Marquee.Edge side="end" />
</Marquee>

Controlled

Use useMarquee to control pause state from outside the component.

svelte 
<script lang="ts">
	import { Marquee, useMarquee } from '@skeletonlabs/skeleton-svelte';

	const marquee = useMarquee(() => ({ autoFill: true, pauseOnInteraction: true }));
</script>

<button onclick={() => marquee().togglePause()}>Toggle Pause</button>
<Marquee.Provider value={marquee}>...</Marquee.Provider>

Anatomy

Here’s an overview of how the Marquee component is structured in code:

tsx 
import { Marquee } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Marquee>
			<Marquee.Edge side="start" />
			<Marquee.Viewport>
				<Marquee.Context>
					{(marquee) =>
						Array.from({ length: marquee.contentCount }).map((_, index) => (
							<Marquee.Content key={index} index={index}>
								{/* items */}
							</Marquee.Content>
						))
					}
				</Marquee.Context>
			</Marquee.Viewport>
			<Marquee.Edge side="end" />
		</Marquee>
	);
}

API Reference

Root

Prop Default Type
children — ReactNode

ids — Partial<{ root: string; viewport: string; content: (index: number) => string; }> | undefined

The ids of the elements in the marquee. Useful for composition.
translations — IntlTranslations | undefined

The localized messages to use.
side "start" Side | undefined

The side/direction the marquee scrolls towards.
speed 50 number | undefined

The speed of the marquee animation in pixels per second.
delay 0 number | undefined

The delay before the animation starts (in seconds).
loopCount 0 number | undefined

The number of times to loop the animation (0 = infinite).
spacing "1rem" string | undefined

The spacing between marquee items.
autoFill false boolean | undefined

Whether to automatically duplicate content to fill the container.
pauseOnInteraction false boolean | undefined

Whether to pause the marquee on user interaction (hover, focus).
reverse false boolean | undefined

Whether to reverse the animation direction.
paused — boolean | undefined

Whether the marquee is paused.
defaultPaused false boolean | undefined

Whether the marquee is paused by default.
onPauseChange — ((details: PauseStatusDetails) => void) | undefined

Function called when the pause status changes.
onLoopComplete — (() => void) | undefined

Function called when the marquee completes one loop iteration.
onComplete — (() => void) | undefined

Function called when the marquee completes all loops and stops. Only fires for finite loops (loopCount > 0).
dir "ltr" "ltr" | "rtl" | undefined

The document's text/writing direction.
getRootNode — (() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Provider

Prop Default Type
value — MarqueeApi<PropTypes>

children — ReactNode

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Context

Prop Default Type
children — (marquee: MarqueeApi<PropTypes>) => ReactNode

Viewport

Prop Default Type
children — ReactNode

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Content

Prop Default Type
index — number

The index of the content instance (0 for original, 1+ for duplicates).
children — ReactNode

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Edge

Prop Default Type
side — Side

The side where the edge gradient should appear.
children — ReactNode

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself
View page on GitHub