Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Marquee Banner Block for Ark UI

A news ticker for a developer platform on a tinted strip: a Latest label, a labelled Pause button, and eight headline links with a bold lead scrolling past.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A scroll marquee banner for React with Ark UI: a news ticker for a developer platform. On a faint tinted strip a dot and "Latest" open the page column, a small outline button labelled "Pause" follows, and eight headlines scroll towards the start of the line, each a link with a bold lead and a muted rest: "API p95 latency down 32% this week", "New region in Singapore is live", "SSO is now generally available". The ends fade with a mask, a small dot leads each headline, and the strip is 44 pixels tall between the page's rails under a top rule. Hovering the row or tabbing to a headline holds it still, which makes the links possible to click and to read; the button stops it for good and turns into "Play". With reduced motion on, nothing moves and the row scrolls by hand. The repeated copies are hidden from screen readers and from the tab order. It follows the theme in light and dark. For release news, status highlights and launch weeks.

FAQ

How does pausing work?

The button before the row toggles the Marquee's paused state, and its visible word changes between "Pause" and "Play"; its accessible name is that word, so a screen reader hears what pressing it will do. Separately, hovering the row or focusing a headline holds it for as long as the pointer or focus stays. Below the small breakpoint the word is visually hidden and the pause icon remains, which keeps the strip on one line.

How do I change the headlines?

Edit HEADLINES at the top of the file: each has a bold lead and a muted rest, and every headline links to # for you to replace. Keep them undated: "this week" and "now" go stale only when you leave the banner up, but a calendar date is wrong the day after. Eight headlines fill any desktop width; the row repeats itself if yours is shorter.

What happens with reduced motion?

The animation is removed, the repeated copy is hidden, the edge fade goes, and the row becomes a sideways scroller that starts at the first headline. The Pause button is hidden because there is nothing to pause.

Why is the strip tinted?

A ticker is a different kind of line from a notice: the faint tint of the theme's muted colour (on the full-width section, not only on the column) marks it as the page's news band. There is no primary colour in the strip; the status dot and the weight carry it.