Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Vote Results Bars Awards Block for React Aria

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.

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 community-vote result for React with React Aria. 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.

How is the winner shown without colour?

By the word "Winner" in a pill, a ring round the row and the solid bar. The other bars are a lighter tone of the same colour.

Is this a live vote?

No. The nominees are made up, and so are the counts. Connect the list to your own results when you have them.

All 137 awards blocks