Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Dual Marquee Awards Block for React

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.

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 dual marquee of awards for React with Base UI. Under a centred header with a count, two bands run from rail to rail, their top rules meeting the rails at + marks, and the second ends the block. Each band scrolls a row of six pills in opposite directions, fading out at both ends; a pill is a small drawn mark (a crown, a star, a medal, a cup, a diamond…), the award, the programme that gave it and the year. A visible "Pause scrolling" button before the rows stops both, hovering or focusing a row holds it, and with reduced motion on nothing moves, the button goes away and the rows scroll by hand. The looping copies are hidden from screen readers and from the tab order. It is built from Marquee, Badge, Button and Guides. 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 movement?

By pressing the Pause scrolling button above the rows (its name stays the same and its pressed state says whether it is paused), by hovering or focusing a row, or by turning on reduced motion in the system, in which case nothing animates and the button is hidden.

How do I change the awards?

Edit FIRST_ROW and SECOND_ROW: each award has a title, a programme, a year and a shape. The header's count is the two rows' total. Each row repeats itself to fill the width, so six is enough.

How do I change the speed or direction?

Each AwardRow takes a speed (30 and 36 here: a higher number is faster) and reverse. Both rows pause together because they share one paused state.

What do screen readers hear?

Each row is a labelled marquee and reads its first copy once: "Best arrangement app, Skerrywick Prize, 2025". The marks are hidden and the repeated copies are hidden and inert.

Are these real awards?

No. The programmes are invented for the example.

How does it fit on a phone?

The pills are the same size and the rows are narrower, so fewer show at once. The header stacks and the block does not scroll sideways at 320 pixels.

  • Pro

    News Crawl Ticker Awards

    Strips and banners

    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.

  • 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

    Trust Badges Marquee Banner

    Tickers

    A trust strip for a file-transfer service: six claims in still, hairline-split cells from the medium breakpoint, and the same six on a pausable marquee below it.

  • Pro

    Row Labels Dual Marquee Logos

    Multi-row marquees

    Two rows of customers of a factory-scheduling service, each a band with an Aerospace or Automotive label cell at the start, divided from the moving logos by a hairline.

  • Pro

    Seal Row Awards

    Badges and seals

    A free row of six drawn award seals, each a different silhouette, with the award, its programme and the year under it, and one counted line below.

  • 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.

All 137 awards blocks