Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

News Crawl Ticker Awards Block for React

One bar with a single line of dated award announcements crawling by a CSS keyframe, with a pause button and a still, wrapped line under reduced motion.

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 news-crawl ticker for React with Base UI: where the dual marquee is two rows of pills, this is one continuous line of text. Under the page's top rule, one bar holds an outline pause button and "In the news", then a single line of six announcements, each with its date in a time element and separated by small dots, crawling towards the start and fading at its ends. The bar ends the block. The pause button stops and restarts the crawl, and hovering or focusing the line holds it too. With reduced motion on, the line does not crawl, the button goes away and the announcements wrap as a still line. The crawl is a CSS keyframe from the theme, with a second copy of the line to loop it. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.

FAQ

How can a visitor stop the crawl?

By pressing the button (its name stays "Pause the scrolling announcements" and its pressed state says whether it is paused), by hovering or focusing the line, or by turning on reduced motion, in which case the line is still and wraps.

How do I change the announcements?

Edit ANNOUNCEMENTS: each has a date (ISO, for the time element), a label (the date as written) and one line of text. Dates are fixed in the data and never computed from today.

How do I change the speed?

The crawl's length is the CSS variable [--marquee-duration:70s] on the track: a bigger number is slower. The track holds two copies of the list and moves by half its width, so the loop has no seam.

What do screen readers hear?

The first list, once, as a labelled list of announcements with their dates. The second copy is hidden and inert.

Are these real awards?

No. The programmes and the newswire are invented for the example.

How does it fit on a phone?

It stays one 44 px bar: the button and the label, then the crawl takes the rest of the width.

  • Pro

    Dual Marquee Awards

    Strips and banners

    Two rows of award pills moving in opposite directions, each with a drawn mark, the award, the programme and the year, and a visible pause button.

  • 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

    Announcement Bar Awards

    Strips and banners

    A slim announcement bar for one headline award: a drawn laurel, one sentence naming the award and the programme, and a Read the story link.

  • Pro

    Compact Badge Strip Awards

    Strips and banners

    A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.

  • Pro

    Badges Marquee Banner

    Tickers

    A compatibility ticker for an SDK: a fixed Works with cell holding a pause button, then outline badges for runtimes scrolling past, with fading ends and a hairline between.

  • Pro

    Rating and Laurels Trust Bar Awards

    Strips and banners

    One trust line: a read-only rating with its score and review count, three small laurels with their awards, and a ghost link to all the recognition.

All 137 awards blocks