Marquee

When to useCopy Anchor Link

Use a marquee for content that is nice to see but not essential to read in full: tags, feature keywords, logos of tools you integrate with, or short quotes. Avoid it for anything the user must read or act on, like prices or instructions, and use at most one per screen.

PlaygroundCopy Anchor Link

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @cadence/marquee

UsageCopy Anchor Link

import { Marquee } from "@/components/ui/marquee"

export function Integrations() {
  return (
    <Marquee aria-label="Integrations" speed={32}>
      {integrations.map((item) => (
        <IntegrationBadge key={item.name} {...item} />
      ))}
    </Marquee>
  )
}

Give the marquee an aria-label that names its content. Items are repeated automatically until they fill the container, so you can pass as few as you like.

PropsCopy Anchor Link

ExamplesCopy Anchor Link

Vertical columnsCopy Anchor Link

Two columns moving in opposite directions, a common pattern for testimonial walls.

AccessibilityCopy Anchor Link

• Assistive technology reads the content once: every copy used to fill the loop is aria-hidden and inert, so links inside are not focused twice.
• Motion eases to a stop while the pointer is over the marquee or keyboard focus is inside it, which gives users a way to pause it (WCAG 2.2.2).
• With reduced motion the marquee renders a single static row that can be scrolled by hand and reached with the keyboard.

PerformanceCopy Anchor Link

• The loop runs on the compositor with the Web Animations API: no per-frame JavaScript and no layout work while it moves.
• It pauses when it is off screen or the tab is hidden, and will-change is only set while it runs.
• Speed is measured in pixels per second, so long and short marquees move at the same pace.