shadcn.io is not affiliated with official shadcn/ui
Badge Ranks Calculator Reviews Block for Radix UI
Five reviewer levels as a ladder with medals drawn in SVG and a two-field calculator that marks your level, the next one and what is still missing.
Installation
Overview
A reviewer level ladder for React with Radix UI, for Ploverstead, a fictional trail-guide community. A compact header sits over one band split by a divider. At the end is the ladder: Newcomer, Regular, Trusted, Expert and Steward as ruled rows, each with a greyscale medal drawn in SVG, its thresholds in words (reviews written, share found helpful) and what it unlocks. At the start is a calculator with two number fields, "Reviews written" and "Found helpful (%)": type your own numbers and the ladder marks the level you hold ("Your level") and the next one ("Next level"), a bar shows the reviews written toward it, and a polite line says what is still missing, such as "you need 3 more reviews". A level needs both its reviews and its rate. On a phone the calculator comes first, then the ladder. It's built from Field, Input, Badge, Guides and hand-drawn medals.
FAQ
How do I change the levels?
Edit LEVELS at the top of the file: a name, the reviews needed, the helpful rate needed (in percent) and what the level unlocks. The calculator takes the highest level whose two thresholds are both met, the "Next level" is the one after it, and the missing amounts are worked out by small helpers, so you can add or drop a level without touching the markup.
What happens with odd numbers?
Anything that isn't a whole number between 0 and the limit is counted as the nearest valid one (reviews up to 999, rate up to 100), and the sentence reads out the numbers it used. Empty fields count as 0. Nothing is stored or sent; the numbers live in the page only.
Are the medals images?
No, they are inline SVG with a title, hidden from screen readers because the level's name is in text beside them. The marks grow with the level: an empty disc, a dot, a check, a star, a star with a dashed outer ring. They draw in your theme's text colour.