Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Criteria Checklist Awards Block for Radix UI

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.

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 criteria checklist for React with Radix UI. A header with a tally counted from the criteria sits above two award cells set apart, each with lines that overshoot its corners and end in + marks. A cell names the award and its programme, shows a progress bar and the sentence "4 of 5 criteria met", then lists five criteria: a check and the word "Met", or a clock and "In review", so status never rests on colour. The last criterion of each is a disclosure that opens to say what the judges are still checking, or how they confirmed it. The counts, the bars and the tally are all taken from the criteria. It's built from Progress, Collapsible, Guides, icons and your theme's tokens, with a CSS transition for the entrance. The Tundrathwaite Index and the Saffronmore Cup are made up for the example.

FAQ

How do I change the awards and criteria?

Edit ENTRIES at the top of the file. Each entry has a title, a programme, a year, its first criteria as criteria, and the last as final, which carries the detail shown in the disclosure. A criterion is met: true or met: false. The bar, the sentence and the header's tally are counted from them, so nothing is typed twice.

How is status shown without colour?

Every criterion has a drawn mark and a word: a solid disc with a check and "Met", or an outlined disc with a clock and "In review". The marks are hidden from assistive technology and the word carries the meaning.

How does the disclosure work?

The last criterion's row is the trigger of a Collapsible, so Enter or Space opens and closes it and the chevron turns. It starts closed, the hidden text is not read while closed, and each cell has its own, so one open doesn't close the other.

How is the progress bar named?

The bar is a real progress element and carries the same sentence as the text above it, "4 of 5 criteria met", as its accessible name.

Are these awards real?

No. The Tundrathwaite Index and the Saffronmore Cup, their criteria and their results are made up for the example, and Gaugeworks is a made-up scanner. Replace them with the awards and checks of your own project.

How does it fit on a phone?

The two cells stack, 1.5rem apart, with their overshoot lines and + marks intact. Criteria wrap inside the row and the status word stays at the end. Nothing scrolls sideways at 320 pixels.

All 137 awards blocks