shadcn.io is not affiliated with official shadcn/ui
News Headlines Carousel Block for React
A one-line news ticker of eight headlines in a vertical track that advances every five seconds with a CSS timer bar, a Pause toggle first in the page, holds on hover and focus, and never starts under reduced motion.
Installation
Overview
Run a headline ticker that respects the reader, with this news headlines carousel for React with Base UI. Dispatchwire, a news-wire app, shows eight headlines one line at a time in a short vertical track: an invented outlet, a category word, a fixed date and the headline. It advances every five seconds and wraps from the last to the first; the thin bar along the foot of the stage is the timer, a CSS animation. A Pause Toggle comes first in the page, hovering the ticker or putting keyboard focus in it holds the bar, and under reduced motion nothing starts: the toggle is replaced by a Next headline Button. Previous and Next arrows and the arrow keys move by hand. It is read out only once it is paused or moved by hand, never while it runs. The ruled panel comes from Guides. It is built from Carousel, Toggle, Button and Guides, with CSS transitions only. The outlets and headlines are made up.
FAQ
How do I use my own headlines?
Edit HEADLINES. Each has an id, an outlet, a category, a date and the text. Change DWELL and the timer's duration class together to change how long each stays.
How does the timer work?
The bar is a full-width element that slides in over five seconds with a CSS animation. When it ends it moves the track on, and the bar starts again under a new key. Pausing, hovering or focusing the ticker sets the animation to paused, so it resumes where it stopped.
Embla follows the same page through its select event; the timer calls the same go as the buttons.
What happens with reduced motion?
The bar is not drawn, so nothing advances by itself. The Pause toggle is hidden and a Next headline button takes its place, and the arrow buttons and keys work as before.
What is announced?
The foot is the block's one status line. While the ticker runs it stays on "Moves every 5 seconds." and is not live, so headlines are not read out one after another. After you pause it or move it by hand it becomes polite and reads the outlet, category and place ("Harbour Ledger, Transport: headline 3 of 8").