Marquee
An infinitely scrolling strip: it renders its children `repeat` times side by side (or stacked, with `vertical`) inside an `overflow-hidden` track and translates each copy by its own width plus the gap, so the row reads as continuous.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/marquee.jsonnpx shadcn@latest add @interlace/marqueeBehavior
What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.
Measured contrast
packages/ui/__tests__/theme-contract-lock.test.ts ↗Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is foreground on background at 16.19:1 (harbor · dark), against a floor of 4.5:1.
| Pair | interlacelight | interlacedark | harborlight | harbordark | Floor |
|---|---|---|---|---|---|
| foreground on backgroundbody copy | 19.65:1 | 16.97:1 | 17.74:1 | 16.19:1 | 4.5:1SC 1.4.3 |
Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.
Runtime contract
packages/ui/vitest.config.ts ↗Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.
- Render boundary
'use client'Hydrates. It brings JavaScript to any route that imports it — put the boundary here, not at the page.
- Minimum viewport
none declaredNo width floor: it takes the width it is given. Its container owns the layout question.
- Coverage gate
not in the gateThe 100% gate currently covers
src/charts/**/*.{ts,tsx}andsrc/lib/**/*.{ts,tsx}andsrc/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.tsandsrc/primitives/{alert,aspect-ratio,avatar,badge,box,breadcrumb,button,callout,card,checkbox,container,data-state,focus-ring,grade-badge,grid,input,label,meter,pagination,published-date,reading-time,section,section-boundary,separator,skip-link,stack,stat-strip,tag,textarea,typography,visually-hidden}.tsx. This file is outside it — the glob widens in phase 7.2.
History
This component is at v1.2.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
Single named export.
import { Marquee } from '@/components/ui/magicui/marquee';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
div.relative
├─ div (track — overflow-hidden, --duration:40s,
│ --gap:1rem, flex-row or flex-col)
│ └─ div ×repeat (.animate-marquee / -vertical, each
│ carrying the same children)
└─ button (play/pause, aria-pressed, top-right)API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
MarqueeProps
| Prop | Type | Description |
|---|---|---|
| className | string | Optional CSS class name to apply custom styles |
| reverse | boolean | Whether to reverse the animation direction @default false |
| pauseOnHover | boolean | Whether to pause the animation on hover @default false |
| children* | React.ReactNode | Content to be displayed in the marquee |
| vertical | boolean | Whether to animate vertically instead of horizontally @default false |
| repeat | number | Number of times to repeat the content @default 2 |
| showPauseControl | boolean | Render a visible play/pause button (WCAG 2.2.2 compliance for any marquee that runs longer than 5 seconds). Defaults to true — turn off only when the marquee is wrapped by another control surface that also exposes pause (e.g. a dashboard widget with its own toolbar). @default true |
| pauseLabel | string | Accessible label for the pause/play control. Customize when the marquee has a specific role (e.g. "Pause sponsor logos"). @default "Pause scrolling content" |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Inherited from the preflight focus contract shipped in @interlace/theme.
- Reduced motion
- Animation is gated on prefers-reduced-motion.
- ARIA in the source
aria-hiddenaria-labelaria-pressed
Examples
3 more states from the same story file.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
PausePlay
- NPM dependencies
lucide-react
- Registry dependencies
Source
The full implementation — components/ui/magicui/marquee.tsx once installed.
"use client";
import { ComponentPropsWithoutRef, useState } from "react";
// @interlace/marquee v1.2.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/marquee
// What changed since: https://ds.interlace.tools/c/marquee#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — Marquee
*
* An infinitely scrolling strip: it renders its children `repeat` times side
* by side (or stacked, with `vertical`) inside an `overflow-hidden` track and
* translates each copy by its own width plus the gap, so the row reads as
* continuous.
*
* Logo walls, testimonial rails, ticker strips.
*
* Our reimplementation of the Magic UI component of the same name. What is
…158 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.