Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Headline Ticker Marquee Blog Block for React

A two-row ticker of headline pills moving in opposite directions with faded edges, a visible pause button, holding on hover and focus; under reduced motion the rows wrap into a plain list.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A headline ticker for React with Base UI, written for Tallyby Weekly, a markets newsletter. A centred header with a ghost pause button sits over a band under the spine's top rule holding two rows of headline pills: the first scrolls towards the end and the second the other way, both faded at the edges by a mask. Hovering or focusing a pill holds both rows, the pause button stops them and starts them again, and under reduced motion nothing moves: the rows wrap into a plain list of links and the button is gone. It's built from Marquee, Button and Guides. For a latest-headlines strip, a newsletter's issue list or a social-proof ticker. Every pill is a real link, and the headlines are example data.

FAQ

How do the pause button and hover work?

The button is an icon Button with aria-pressed and a name ("Pause the headlines"); pressed, both rows hold. Hovering any part of a row, or focusing a pill, holds the rows too, so you can read and click. Both are CSS on the Marquee, with no timers.

What happens with reduced motion?

Nothing scrolls. The loop's extra copies are hidden, the edge fade is off, the button is hidden and each row wraps into lines of pills, so every headline is readable and reachable without any animation.

What do screen readers and the keyboard see?

Each row is a labelled region. The copies that make the loop are hidden from screen readers and made inert, so each headline is announced and tabbed to once.

How do I change the speed or the headlines?

Edit FIRST_ROW and SECOND_ROW, and the speed on each Marquee (the rows run at 40 and 34, so they drift apart). autoFill repeats a row until it is wide enough.

How does it fit on a phone?

The pills get smaller (the section tag is dropped) and the rows keep the full width.

Does it work right to left?

The header and the pills mirror. The rows keep scrolling in the directions set, one towards the end and one the other way.

  • Pro

    Tags Marquee Banner

    Tickers

    A trending-tags ticker for a developer forum: an outline pause button, a Trending label, and twelve tag links with compact counts scrolling the other way.

  • Pro

    Scroll Marquee Banner

    Tickers

    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.

  • Pro

    Trending Posts Blog

    Post lists

    Six ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.

  • Pro

    Week Board Blog

    Archives by date

    A news digest's week as five columns, Monday to Friday, each with a huge day numeral and that day's posts or a quiet 'No post', in a snap scroller on phones.

  • Pro

    Email Digest Blog

    Subscribe and alerts

    A morning briefing shown as the email it is: drawn mail chrome, four summaries and an unsubscribe line, with a Switch that turns them into monospaced plain text.

  • Pro

    Latest Posts Blog

    Featured story

    Just published: the newest post as a lead band in large type with a pulsing dot and a New mark, three earlier posts as rows with unread dots, and a Mark all as read button.

All 100 blog blocks