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.
Installation
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.
Can visitors click a headline while it moves?
They can: hovering the row stops it. Keyboard users get the same, since focusing a link holds the row and the focus ring is drawn inside the strip, not clipped by it. The repeated copy that makes the loop is inert, so Tab goes through each headline exactly once.