Docs

Marquee

An infinitely-looping ticker.

Real use · logo wall

NorthwindAcmeContosoFabrikamGlobexInitechUmbrella

Reverse, slow, cards

Shipped in a weekend.

Our whole design system, one dependency.

The theme editor alone paid for it.

Finally, a marquee that doesn't hitch.

Vertical · needs a height

NorthwindAcmeContosoFabrikamGlobexInitechUmbrella

Short content · repeat fills the strip

DesignBuildShip

No fade, no pause on hover

NorthwindAcmeContosoFabrikamGlobexInitechUmbrella

Using Marquee

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Marquee is styled but inert: its behavior comes from marquee. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class marquee, with 14 modifiers:

  • .marquee
  • .marquee-copies-2
  • .marquee-copies-3
  • .marquee-copies-4
  • .marquee-copies-5
  • .marquee-copies-6
  • .marquee-fade
  • .marquee-fast
  • .marquee-group
  • .marquee-normal
  • .marquee-pause-on-hover
  • .marquee-reverse
  • .marquee-slow
  • .marquee-track
  • .marquee-vertical

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react
import { Marquee } from "@wizeworks/silicaui-react";

Props

PropTypeRequiredDescription
directionMarqueeDirectionnoTravel direction. left (default) and right are horizontal; up/down are vertical and need a height on the marquee or its parent.
speedMarqueeSpeednoLoop speed — slow 80s, normal (default) 40s, fast 20s per cycle. For anything else set --marquee-duration via style.
pauseOnHoverbooleannoFreeze the strip while the pointer is over it, or while something inside it has keyboard focus. Default true.
fadebooleannoSoften both ends so items dissolve rather than getting guillotined at the edge. Default true; width is --marquee-fade (4rem).
repeat2 | 3 | 4 | 5 | 6noHow many times the content is repeated to build the loop, 2–6.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source
import { Badge, Card, Marquee } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

const LOGOS = ["Northwind", "Acme", "Contoso", "Fabrikam", "Globex", "Initech", "Umbrella"];

const QUOTES = [
    "Shipped in a weekend.",
    "Our whole design system, one dependency.",
    "The theme editor alone paid for it.",
    "Finally, a marquee that doesn't hitch.",
];

export function MarqueeDemo() {
    return (
        <>
            <Section title="Real use · logo wall">
                <Marquee className="py-6">
                    {LOGOS.map((name) => (
                        <span key={name} className="text-2xl font-semibold whitespace-nowrap">
                            {name}
                        </span>
                    ))}
                </Marquee>
            </Section>

            <Section title="Reverse, slow, cards">
                <Marquee direction="right" speed="slow" className="py-4">
                    {QUOTES.map((quote) => (
                        <Card key={quote} className="w-72 shrink-0 p-4">
                            <p>{quote}</p>
                        </Card>
                    ))}
                </Marquee>
            </Section>

            <Section title="Vertical · needs a height">
                <Marquee direction="up" speed="fast" className="h-64 w-56 px-2">
                    {LOGOS.map((name) => (
                        <Badge key={name} color="primary" className="whitespace-nowrap">
                            {name}
                        </Badge>
                    ))}
                </Marquee>
            </Section>

            <Section title="Short content · repeat fills the strip">
                {/* Three items can't overflow a wide strip, so two copies would
                    leave a visible blank. More copies, not a padded list. */}
                <Marquee repeat={5} className="py-4">
                    {["Design", "Build", "Ship"].map((word) => (
                        <span key={word} className="text-xl font-medium whitespace-nowrap">
                            {word}
                        </span>
                    ))}
                </Marquee>
            </Section>

            <Section title="No fade, no pause on hover">
                <Marquee fade={false} pauseOnHover={false} className="py-4">
                    {LOGOS.map((name) => (
                        <span key={name} className="text-xl whitespace-nowrap">
                            {name}
                        </span>
                    ))}
                </Marquee>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Marquee — marquee. Direction/speed/fade are CLASSES, not props: they're pure presentation with no structural or runtime counterpart, so the class is the API exactly as it is for Button. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors
import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Marquee", "marquee", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "marquee marquee-primary" rather than passing a colour as a prop.

Takes children
yes
Hydrated by
marquee

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Marquee, on every path, is available through the Silica MCP server.