shadcn.io is not affiliated with official shadcn/ui
Rate Display Awards Block for Svelte
A ring gauge for a shortlist rate beside a description list (submitted, shortlisted, declined) over a stacked bar, with the base always shown (9 of 120 entries shortlisted), derived from the editions.
Installation
Overview
A shortlist rate for Svelte with Ark UI. A reverse split with a solid divider and + marks: at the start a framed figure with a ring gauge (the circular progress) showing the rate, the value in its centre and the base in its caption ("9 of 120 entries shortlisted"); at the end the header, then a three-row description list (submitted, shortlisted, declined) over a stacked bar in two weights. The ring and the bar use the same share, and every number is counted from the editions at the top, so they always agree. On a phone the ring sits under the header and the facts follow it. It's built from the circular progress, the data list, Guides and your theme's tokens. The Heronstead Standard and its editions are made up for the example.
FAQ
How do I change the numbers?
Edit EDITIONS at the top of the file. Each edition has a year (fixed), the number of entries submitted and how many were shortlisted. The totals, the declined count (submitted less shortlisted), the rate to one decimal, the ring, the bar and the header sentence are all counted from those rows.
Why does it always show a base?
A rate without its base misleads: 7.5% of 120 is not 7.5% of 20. The caption, the header and the list all say "9 of 120", so the percentage is never alone. The ring and the bar draw the same share, so the drawing can't disagree with the text.
How do I restyle the ring?
The ring is the catalog's circular progress, given your theme's foreground for its arc. Set its size and thickness in pixels on the component; the value is the rate, 0 to 100. The text in its middle is drawn by the block and sits over the ring, so change its size with the ring's.
How do screen readers read it?
The ring is a drawing hidden from assistive technology; the figure's caption and the description list carry the same facts in text ("9 of 120 entries shortlisted", then the three counts). The stacked bar is hidden too, with its legend written out underneath. Counts sit in bdi elements so they keep their order in a right-to-left layout.