Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Badge Tracker Team Block for Ark UI

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.

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

An achievements section about one person for React with Ark 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.

How does it fit on a phone?

Cells stay two across and stack the mark over the text; from sm the mark sits beside the text. The grid comes right after the header, so the badges are the first thing below it, and the person and the next badge close the block.

Does it work right to left?

Yes. The cells and the person's row follow the page direction, the counts and the year are wrapped in bdi, and the bar is always drawn left to right because it measures progress.

All 126 team blocks