Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Dual Marquee Awards Block for Radix UI

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

All 137 awards blocks