ComponentsSite blocks
A “Trending now” or breaking-news strip. rotate shows one headline at a time with previous / next and a pause button; it pauses while hovered or focused and when the tab is hidden, and never starts under prefers-reduced-motion (WCAG 2.2.2). Headlines are announced only while it is paused, so it never chatters. marquee is a continuous crawl on the kit Marquee (CSS, pausable, static with reduced motion).
Marquee blocks/site/news-ticker.tsx, styles/blocks.csstheme · material · accent · density · font
Installation
$ pnpm add @vamos-ui/react
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { NewsTicker } from "@vamos-ui/react/blocks";
<NewsTicker items={[{ title: "Swing bridge closes tonight", href: "/city/bridge", category: "Traffic", breaking: true }, …]} />
<NewsTicker mode="marquee" tone="ink" items={headlines} />Under 28rem the category label and the previous arrow hide; pause and next stay.
Examples
Marquee, Turkish
Every headline is listed once for assistive tech; the duplicate track is aria-hidden and inert.
Gündemde
API
NewsTicker
| Prop | Type | Default |
|---|---|---|
itemsbreaking adds a dot (pulses only without reduced motion). | { title; href; category?; breaking? }[] | — |
modeOne at a time, or a crawl. | "rotate" | "marquee" | "rotate" |
intervalrotate: ms per headline. | number | 5000 |
autoplayrotate: advance on its own (never under reduced motion). | boolean | true |
labelThe tag; names the region. | ReactNode | "Trending now" |
toneTag colour. | "accent" | "ink" | "danger" | "accent" |
locale / labels / components / classNameStrings: trendingNow, pause/play, previous/next headline. | … | — |