Skip to main content
ShadcnUI
Navigation

Marquee

A complete presentation list with an optional, deliberately finite scrolling preview. This is not an endless ticker.

When to use it. Use it for a short decorative brand or topic collection. Keep important notices, live data and application actions outside moving presentation.

Native baseline Structured noninteractive records only; there is no arbitrary cloned HEEx slot. Canonical text and image alternatives remain native list content. The unnamed checkbox contributes no form value. The duplicate disappears after completion or interruption; there are no live announcements, playback state or package scripts. Exact fallback Static is the default. Preview needs the joint CSS :has, :dir, transform and animation gate. Without CSS, its control and duplicate remain hidden and all canonical items are available. motion=:none, ancestor data-shadcn-motion=reduce and OS reduced motion win over checking. System is not force-animation. Finite effects can finish offscreen; there is no visibility observer or hover-only stop.

How it works

  • <.marquee> Structured noninteractive records only; there is no arbitrary cloned HEEx slot. Canonical text and image alternatives remain native list content. The unnamed checkbox contributes no form value. The duplicate disappears after completion or interruption; there are no live announcements, playback state or package scripts.
  • package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
  • gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :marquee does not ship them.
  • application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

The visible native checkbox is initially unchecked: Space or a click enables one traversal. Uncheck to stop/reset after focus leaves; check again to replay. Checked means enabled, not currently playing. The canonical named list appears once in the accessibility tree. One inert, aria-hidden decorative copy has no IDs, links, actions, controls or meaningful duplicate image alt.

Marquee support and fallback
Feature Locked-engine evidence When missing
Native baseline Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. Static is the default. Preview needs the joint CSS :has, :dir, transform and animation gate. Without CSS, its control and duplicate remain hidden and all canonical items are available. motion=:none, ancestor data-shadcn-motion=reduce and OS reduced motion win over checking. System is not force-animation. Finite effects can finish offscreen; there is no visibility observer or hover-only stop.
Exact fallback The locked-engine matrix retains the documented native or static outcome. Static is the default. Preview needs the joint CSS :has, :dir, transform and animation gate. Without CSS, its control and duplicate remain hidden and all canonical items are available. motion=:none, ancestor data-shadcn-motion=reduce and OS reduced motion win over checking. System is not force-animation. Finite effects can finish offscreen; there is no visibility observer or hover-only stop.

Application ownership and API

You own item text, stable keys, image sources, rights, alternative text and intrinsic dimensions. Replacement can reset the native checkbox. Persisting stop preferences and restoring patch state belong to your application, not this component.

Attributes and item slots. Required id, accessible_label and nonempty items. Each item: unique string key, nonblank escaped text, optional image map (src, alt, positive width/height, optional srcset/sizes/loading/decoding). Empty alt marks an image decorative beside its text. No href, events, raw HTML or arbitrary image globals. mode=:static|:preview; direction=:inline_start|:inline_end follows LTR/RTL; duration=:brief (2500ms)|:default (5000ms), no delay/repeat. motion=:system|:none. Root class/rest preserve unrelated globals while required identities, names, motion markers and style are protected.

Public API Package source

Provenance

Catalogue identity motion.marquee, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Replace infinite autoplay with static wrapped canonical content, structured validated presentation records, a visible unnamed native opt-in checkbox, one finite traversal capped at five seconds, persistent stop/reset/replay and one inert ID-free duplicate visible only during preview. Preserve reduced-motion and unsupported-CSS static fallbacks without runtime.