shadcn.io is not affiliated with official shadcn/ui
Vote Results Bars Awards Block for React
Horizontal progress bars for six nominees sorted by votes, with a segmented control that swaps votes for share, a ringed winner row, a derived total and a fixed certification date.
Installation
Overview
A community-vote result for React with Base UI. Six nominees for a made-up award are listed by votes, most first, each with a name, a full-width progress bar and the figure. The winner's row is in a ring and carries the word "Winner". A segmented control, Votes or Share, swaps the figure and the bar's scale (the leader's count or 100 per cent), and the other number stays beside it in muted text. Shares are worked out from the votes with the largest remainder, so they always add to 100, and the foot band gives the total and the fixed day the results were certified. It's built from Guides, Progress and SegmentGroup. The poll, the nominees and the counts are made up for the example, and nothing is counted or sent: the vote totals are typed data.
FAQ
How do I change the nominees and votes?
Edit NOMINEES at the top of the file: each has a name and a vote count. The order, the total, the shares and the sentence in the header are worked out from them, so nothing else needs a change. The year and the certification date are fixed in the file, never taken from today.
Why do the shares always add to 100?
Each share is rounded down, and the points left over go to the nominees with the largest remainders (the largest remainder method). A plain rounding could add up to 99 or 101.
What does the Votes and Share control change?
The figure on each row, the muted number beside it and the scale of the bar: against the leader's count under Votes (so the leader's bar is full), against 100 per cent under Share. A polite status line says which view is showing, and the block keeps its height.
Are the bars read by a screen reader?
No: they are decorative and hidden. The rank, the name and both figures are in the row's text, so nothing is lost.
Related
- Pro
Re-ranking Leaderboard Awards
Rankings and scoresA 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
Platform Rankings Awards
Rankings and scoresA 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.
- Pro
Win Percentage Awards
Charts and figuresA 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.
- 213Pro
Three Step Podium Awards
Rankings and scoresA podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.
- Pro
Category Top Three Awards
Rankings and scoresFive software categories in cells on shared hairlines, each a small top three with the product's own row in a ring, a read-only rating in stars and words, and the word Leader on the categories it won.
- Pro
Category Counts Awards
Charts and figuresNine count tiles on shared hairlines for a sports-league manager: a drawn category glyph, the count in large type, its share of all awards and a bar scaled to the largest, with the largest outlined.