shadcn.io is not affiliated with official shadcn/ui
Win Percentage Awards Block for Radix UI
A ten by ten waffle of nominations for a sales-analytics tool: won squares filled, shortlisted outlined, the rest faint, with the share won, a count with its base, and a legend, all derived from the editions.
Installation
Overview
A win rate for React with Radix UI. A split with a solid divider and + marks: at the start the header and a short description list (nominated, shortlisted, won, each with its base, "61 of 160 nominations") with a legend under it; at the end a framed figure, a ten by ten grid of squares drawn from the nominations, where each square is one hundredth of them. Won is filled, shortlisted outlined, the rest faint, and the share that won sits centred under the grid. On a phone the figure sits under the header and the facts follow it. The squares use largest remainder, so the hundred always add up, and every number is counted from the editions at the top. It's built from the data list, Guides, CSS squares and your theme's tokens. The Wickerholm Prize and its editions are made up for the example.
FAQ
How do I change the nominations?
Edit EDITIONS at the top of the file. Each edition has a year (fixed), the number nominated, how many reached the shortlisted stage (winners included) and how many won. The totals, the percentages, the squares, the header sentence and the years are all counted from those rows. Keep won at most shortlisted and shortlisted at most nominated.
How are the hundred squares decided?
Each result takes the whole squares its share earns, then the squares still missing go to the results with the biggest remainders (largest remainder), so there are always exactly one hundred. The percentage in the middle is the plain rounded share, so it can differ from the square count by a point; the caption says each square is one hundredth of the nominations.
Why are there no colours in the grid?
Won, shortlisted and not shortlisted differ by fill, outline and weight, not by hue, so the grid works in any theme and for anyone who can't tell colours apart. The legend names all three in words, and the list beside it gives the counts.
How do screen readers read the waffle?
They don't read the squares: the grid is a drawing hidden from assistive technology. The figure's caption gives the share ("38% of nominations won") and the description list gives the counts with their base. Everything the grid shows is in the text.
How does it change on a phone?
The split becomes a stack in reading order: the header, the figure, then the facts and the legend. The grid keeps ten columns and the squares shrink. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the text mirrors while the grid keeps its fill order.