shadcn.io is not affiliated with official shadcn/ui
Badge Tracker Team Block for React
One person's eight badges in hairline cells, earned ones solid and locked ones dashed outlines, beside the person and a bar to the next badge: 7 of 10 reviews to Reviewer II.
Installation
Overview
An achievements section about one person for React with Base UI, written for Thorncombe, a fictional code-review tool. A header sits at the start with the person under it (an initials avatar, a name, a role and their year), how many badges they hold, and the next badge to reach with a bar: "7 of 10 reviews to Reviewer II". At the end, from rail to rail and ending the block, eight badges share their hairlines two across. An earned badge is a solid drawn mark with "Earned, year 2"; a locked one is a dashed outline that says how it is won. On a phone the badge grid comes right after the header and the person follows. It is built from Avatar, Progress and Guides with your theme's tokens. The person is fictional and years are tenures, never calendar years.
FAQ
How do I change the badges?
Edit BADGES at the top of the file: each has a name, how it is won, a shape for its mark and, once earned, the year it was earned in. A locked badge may carry progress (where the person is: how many, out of how many, of what). The count of earned badges and the bar are worked out from the list: the next badge is the first locked one with progress under way.
How are earned and locked told apart without colour?
By drawing and by words. An earned mark is solid with a stroke in the foreground tone and its caption begins "Earned, year 2"; a locked mark is only a dashed outline in the quieter tone and its caption begins "Locked". Nothing depends on a hue, so it reads the same in every theme and in high contrast.
How is the progress bar named?
The sentence above the bar carries the fact in text ("7 of 10 reviews to Reviewer II"); the bar is a drawing that repeats it and is hidden from assistive technology, so it is not announced twice. The bar is the foreground tone, not the theme's primary colour.
Related
- Pro
Awards Table Team
RecognitionA table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.
- Pro
Counted Award Cells Team
RecognitionFour award categories as cells apart with overshoot: a drawn mark, a count that rolls up once, who gives the award, and the latest winner under a hairline.
- Pro
Quarter Goals Team
Learning and mentoringOne person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.
- Pro
Progress Tracker Learning Goals Team
Learning and mentoringA team learning tracker in a split: a completion ring worked out from five goals with four counted facts at the start, and a row per person at the end with their goal, a progress bar, the quarter it is due and details that open in place.
- Pro
Onboarding Checklist Team
Hiring and onboardingOne person's setup list at a security-awareness company: a ring that fills as tasks are ticked, a Next up band, and fourteen tasks in three collapsible groups, each task with a due tag.
- 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.