shadcn.io is not affiliated with official shadcn/ui
Medal Count Awards Block for Radix UI
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.
Installation
Overview
A medals table for React with Radix UI. A header with a "Top line" callout at its end sits above a table ruled in bands from rail to rail: one row for each product line, ranked by gold medals, then silver, with ties listed A to Z, and columns for the rank, the line, Gold, Silver, Bronze and a total. Each medal head carries a small drawn medal in a different weight (solid, half, outline) over its word, so the medals read by shape and word, never by a metal colour. The rule is stated under the table, the Gold head carries the sort state, and on a phone the rank and the line stay in place while the medals scroll sideways in a keyboard-reachable region. It's built from a native table, Guides and your theme's tokens. The Isleholm Cup and the medals are made up for the example.
FAQ
How do I change the medals?
Edit MEDALS at the top of the file: one line for each medal won, with the product line (an id from LINES), the medal ("gold", "silver" or "bronze") and the year, a fixed number. The counts, the totals, the ranks, the "Top line" callout and the totals in the header are all counted from that list. Add product lines to LINES; the table gains a row.
How are the lines ranked?
By gold medals, then by silver medals, then by the line's name A to Z, the way a medals table is read. Bronze and the total don't decide the order. The rule is written under the table so nobody has to guess, and the Gold head carries aria-sort="descending" so assistive technology knows which column the order follows. To rank by the total instead, change the comparison in BOARD and the sentence under the table, and move the sort state to the Total head.
Why are the medals drawn in different weights?
So that the medals are told apart without colour: gold is a solid disc, silver half filled, bronze an outline, each with its word underneath. The drawing is hidden from assistive technology and the word is the label.
What happens on a phone?
The table is wider than the screen, so it scrolls sideways in a region that takes focus, and the rank and the line column stay in place while the medals move under them. Rows stay one line tall. Nothing else on the page scrolls sideways.
How do screen readers read it?
It's a real table with a caption that describes the ranking, column heads, and the rank as the head of each row. The "Top line" callout is plain text, and the figures in it are written out ("4 gold, 2 silver, 1 bronze"). Ranks and counts sit in elements that keep their order in a right-to-left layout.