Marquee

🐉Dragon

🧙Wizard

⚔️Knight

💀Skeleton

🏰Castle

🧝Elf

🗡️Rogue

🛡️Paladin

tsx

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

const items = [
	{ emoji: '🐉', label: 'Dragon' },
	{ emoji: '🧙', label: 'Wizard' },
	{ emoji: '⚔️', label: 'Knight' },
	{ emoji: '💀', label: 'Skeleton' },
	{ emoji: '🏰', label: 'Castle' },
	{ emoji: '🧝', label: 'Elf' },
	{ emoji: '🗡️', label: 'Rogue' },
	{ emoji: '🛡️', label: 'Paladin' },
];

export default function MarqueeDefault() {
	return (
		<Marquee autoFill pauseOnInteraction>
			<Marquee.Edge side="start" />
			<Marquee.Viewport>
				<Marquee.Context>
					{(marquee) =>
						Array.from({ length: marquee.contentCount }).map((_, index) => (
							<Marquee.Content key={index} index={index}>
								{items.map((item) => (
									<div key={item.label} className="card bg-surface-100-900 flex items-center gap-3 px-6 py-4 whitespace-nowrap">
										<span className="text-3xl">{item.emoji}</span>
										<span className="font-medium">{item.label}</span>
									</div>
								))}
							</Marquee.Content>
						))
					}
				</Marquee.Context>
			</Marquee.Viewport>
			<Marquee.Edge side="end" />
		</Marquee>
	);
}

🐉 Dragon

🧙 Wizard

⚔️ Knight

💀 Skeleton

🏰 Castle

🧝 Elf

🗡️ Rogue

🛡️ Paladin

svelte

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

	const items = [
		{ emoji: '🐉', label: 'Dragon' },
		{ emoji: '🧙', label: 'Wizard' },
		{ emoji: '⚔️', label: 'Knight' },
		{ emoji: '💀', label: 'Skeleton' },
		{ emoji: '🏰', label: 'Castle' },
		{ emoji: '🧝', label: 'Elf' },
		{ emoji: '🗡️', label: 'Rogue' },
		{ emoji: '🛡️', label: 'Paladin' },
	];
</script>

<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}>
						{#each items as item}
							<div class="card bg-surface-100-900 flex items-center gap-3 px-6 py-4 whitespace-nowrap">
								<span class="text-3xl">{item.emoji}</span>
								<span class="font-medium">{item.label}</span>
							</div>
						{/each}
					</Marquee.Content>
				{/each}
			{/snippet}
		</Marquee.Context>
	</Marquee.Viewport>
	<Marquee.Edge side="end" />
</Marquee>

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>
	);
}

svelte

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

<Marquee>
	<Marquee.Edge side="start" />
	<Marquee.Viewport>
		<Marquee.Context>
			{#snippet children(marquee)}
				{#each Array.from({ length: marquee().contentCount }) as _, index}
					<Marquee.Content {index}>
						<!-- items -->
					</Marquee.Content>
				{/each}
			{/snippet}
		</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

Root

Prop	Default	Type
`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`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => MarqueeApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => MarqueeApi<PropTypes>]>

Viewport

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Prop	Default	Type
`index`	—	number The index of the content instance (0 for original, 1+ for duplicates).
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Edge

Prop	Default	Type
`side`	—	Side The side where the edge gradient should appear.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Usage

Controlled

Anatomy

API Reference

Root

Provider

Context

Viewport

Content

Edge

Root

Provider

Context

Viewport

Content

Edge