Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Playlist Format Awards Block for React

Awards as a tracklist: a now playing card with a drawn record, an ordered list of seven tracks chosen by arrow keys, and a Shuffle toggle. No audio.

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 tracklist for React with Base UI. A split: at the start a "now playing" card with a drawn record in its sleeve (grooves, a sheen that turns a notch with each choice, a laurel on the label), then the chosen award as the title, its programme as the artist and a "Track 3 of 7" line, and a Shuffle toggle. At the end, an ordered list of seven tracks: a number, the award, the programme, and the year in the duration column. There is no audio: it is a way to browse. The awards and programmes are made up for the example.

FAQ

How do I change the tracks?

Edit TRACKS: each has an award, a category, a programme and a year. The count, the numbering and the "Track n of N" line come from the list. SHUFFLED is the fixed play order used when Shuffle is on.

How does the keyboard work?

The rows are buttons in one roving group: Tab enters the list on the chosen row, the up and down arrows move the choice and the focus, Home and End jump to the ends, and Enter or Space chooses a row. The chosen row has aria-current.

What does Shuffle do?

It is a toggle button with a pressed state. Pressed, the rows trade places in another fixed order and the chosen award stays chosen. Unpressed, the list is back in the original order. The list keeps the same height.

What moves?

Only the sheen on the record turns a notch when you choose a track, and it does not move under reduced motion. Nothing plays on its own.

Does it work on a right-to-left page?

Yes. The layout uses logical sides, the play icon mirrors, and years and counts sit in bdi elements.

Are these real awards?

No. The programmes, awards and the record store product are made up for the example.

  • Pro

    Terminal Log Awards

    Themed formats

    Awards printed by a command-line toolkit in a terminal window, with a toggle group of three commands that swaps the output without moving the page.

  • Pro

    Receipt Slip Awards

    Themed formats

    Awards printed as a thermal receipt: a torn-edge slip with mono line items, dotted leaders, a derived subtotal, a verified stamp and a drawn barcode.

  • Pro

    Re-ranking Leaderboard Awards

    Rankings and scores

    A ranked table of seven comparison tools in an index, with the site's own row in a ring, a segmented control that ranks it again by overall score, ease of use or support, and a methodology note that folds open.

  • Pro

    Class Plaques Hall of Fame Awards

    People and teams

    A hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.

  • Pro

    Year Rail Timeline Awards

    Timelines

    A vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.

  • Pro

    Moment Gallery Awards

    Reveal and browse

    A large drawn stage scene with the event details in its caption and a filmstrip of five moments you choose by radio buttons, in greyscale SVG, never photos.

All 137 awards blocks