Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Edition Comparison Awards Block for React

A table by category for a usage-billing API comparing its placement at two editions of an awards programme, each row reading 7th to 3rd with an arrow, the places gained in words, a filled dot on a win and a total row.

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 two-edition comparison for React with Base UI. A table with a row for each of eight categories shows the placement at last year's edition and this year's in one line ("7th to 1st"), the move as an arrow and words ("up 6 places"), and a filled dot with the word "Won" in the categories where it placed first. The foot row totals the wins, and the header counts the places gained across every category. Cells share hairlines both ways and the table ends the block. On a phone the dot moves in front of the category and the move's unit drops out of sight. It's built from Guides, a native table and Lucide icons. The programme and its results are made up for the example.

FAQ

How do I change the placements?

Edit PLACEMENTS at the top of the file: each category has the previous and latest placement as numbers, and the two edition years are PREVIOUS_YEAR and LATEST_YEAR. The ordinals (1st, 2nd, 3rd, 11th), the moves, the wins, the total row and the header sentence are all worked out from it.

What counts as a win?

Placing first in the category. Those rows get a filled dot and the word "Won"; the others show a dash with "Not won" for a screen reader. The foot row compares the number of wins in the two editions.

How is the move written?

As the number of places gained or lost: "up 6 places", "down 1 place" or "no change", with an arrow or a dash in a small chip. A lower number is a better placement, so going from 7th to 1st is up 6. Nothing relies on colour.

How is this different from the trend arrows block?

That block compares measures year on year (awards won, shortlists, win rate); this one compares one programme's placement category by category across two editions.

What changes on a phone?

The Won column is dropped and its dot moves in front of the category name, with "won" kept for a screen reader; the move's unit ("places") is hidden so the arrow and the number fit. Nothing scrolls sideways at 320 pixels.

Are these placements real?

No. Metronomic and the Orchidmore Awards are made up, and so are the categories and results. Replace them with your own.

  • Pro

    Trend Arrows Awards

    Lists and tables

    A ruled table for an investing app comparing five award measures this year and last year, with the change as an arrow icon and words (up 4, flat, down 1) so a change is never told by colour alone.

  • Pro

    Count By Year Awards

    Charts and figures

    A split for a flood-risk analytics tool: a header and a toggle at the start and, at the end, a ruled list of years from 2019 to 2025, each a horizontal bar and its count, counting either awards or programmes.

  • Pro

    Growth Staircase Awards

    Charts and figures

    A reverse split for a garden-centre till system: a framed staircase chart of the running total of awards by year with the three biggest years marked, beside the header and a list of three facts.

  • 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

    Medal Count Awards

    Rankings and scores

    An Olympic-style medals table for a league-tables service: seven product lines ranked by gold, then silver, with drawn medal heads, a total, a stated ranking rule and a top-line callout.

  • Pro

    Platform Rankings Awards

    Rankings and scores

    A table with one row for each of four review sites, showing a product's rating as read-only stars and words, the review count and its rank in the category, with a foot row for the weighted average.

All 137 awards blocks