Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Music Nominations Awards Block for React

A ballot sheet on a paper-like panel: four categories, each with a nominee list and a box, the winner's box checked and labelled Winner.

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 ballot for React with Base UI. A centred header sits over a paper-like sheet in a framed panel: a perforated stub ("Official ballot", a serial number), the instruction "Mark one nominee in each category", and four categories on shared hairlines. Each category is a definition-list entry with its name and a list of nominees, each with a drawn box. The winner's box is filled with a check and the row says "Winner" in words. The header's counts ("2 wins from 3 nominations") come from the same list. The programme, the apps and the artists are made up for the example, and nothing on the sheet is interactive.

FAQ

How do I change the categories and nominees?

Edit CATEGORIES: each has a name and its nominees, built with nominee(name, winner, ours). The header counts are derived from the entries marked as yours.

How is the winner shown without colour?

The winner's box is filled and carries a check, the name is bolder, and the word "Winner" is in the text. Everyone else has an empty box.

Is this a form?

No. It is a record of a result, drawn like a ballot. For a real nomination form see the nomination form block.

What does a screen reader hear?

A definition list: each category name, then its nominees as a list, with "Winner" read after the winning name. The boxes are drawings hidden from assistive technology.

Does it work on a right-to-left page?

Yes. The layout uses logical sides and the year and ballot number sit in bdi elements.

Is this a real programme?

No. The programme, the nominees and the artists are all made up for the example.

  • Pro

    Vote Results Bars Awards

    Rankings and scores

    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.

  • Pro

    Nomination Form Awards

    People and teams

    A nomination form for an internal recognition programme: a category radio group, a searchable colleague list, a reason with a live character count and a confirmation that says it is only recorded in the demo.

  • Pro

    Criteria Checklist Awards

    Rankings and scores

    Two awards a code-quality scanner is working toward as cells with overshoot lines: a progress bar, a count and five criteria each, met or in review, with the last explained in a disclosure.

  • Pro

    Category Grid Awards

    Cards and grids

    Sixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.

  • 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.

  • Pro

    Certificate Awards

    One featured award

    A formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.

All 137 awards blocks