shadcn.io is not affiliated with official shadcn/ui
Badge Ranks Calculator Reviews Block for React
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 Base 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.
Related
- Pro
Top Reviewers Table Reviews
Reviewers and rewardsA ranked table of eight recipe-community reviewers that a toggle group re-ranks by reviews, helpful votes or helpful rate, with a hover card of each one's latest review.
- Pro
Reviewer Profile Reviews
Reviewers and rewardsA reviewer's page for a board-game review site: a profile with figures worked out from her fourteen reviews, her ratings set against everyone's in paired bars, and her latest reviews with a sort Select.
- Pro
Incentive Program Reviews
Reviewers and rewardsThank-you points for a pet-supplies shop: a balance, a tier with a Progress, two rewards that confirm in an AlertDialog and a ledger table, with the policy that points never depend on the rating.
- Pro
Dense Badge Wall Awards
Badges and sealsA wall of twelve drawn award badges on shared hairlines, four across, with a tally counted from the list and a show-all button on phones.
- Pro
Full Write Form Reviews
Ask and writeThe whole review form on one page for a cast-iron pan: a named star rating, a title and text with live counts, pro and con tag lists, a recommend choice, photo names, and a sticky checklist with a progress bar.
- Pro
Values Slider About
Culture and valuesA carousel of six values for an HR platform, one per slide in a band from rail to rail: the value, a practice example and one figure side by side, with Previous and Next buttons, a counter and dots.