Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Season Tracker Awards Block for React

A season tracker for a habit tracker entering an awards programme: six categories in a framed figure, each with a progress bar of entries against its target, a pace tick, the count and an Ahead, On pace or Behind chip.

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

A season tracker for React with Base UI. A header says where the season stands ("Week 12 of 16") above one framed figure, with a + mark on each corner, holding six categories. Each row is the category's name, a progress bar of the entries submitted against its target, a tick where the pace for this week falls, the count ("4 of 6") and a chip with an icon and a word: Ahead, On pace or Behind. A foot row adds up the entries against the pace for the whole season. The page's rails and top rule come from the Guides spine. It's built from Guides, Progress and your theme's tokens, with a CSS transition for the bars. It tracks entries sent in, not results. The programme and the figures are made up for the example.

FAQ

How do I change the categories and the season?

Edit CATEGORIES at the top of the file: each has a name, the entries submitted and its target. WEEK and WEEKS set where the season stands, as fixed numbers, never read from the clock. The totals, the pace and every status are worked out from these.

How is the status decided?

The pace for a category is its target times the share of the season that has gone (12 of 16 weeks is 75%). Entries more than half an entry above the pace are Ahead, more than half below are Behind, and anything between is On pace; change SLACK to tighten or loosen that. The status is an icon and a word with a different outline, never a colour, so it reads in any theme.

What does the tick on each bar show?

The pace: where the bar should have reached by this week. A bar short of the tick is behind and one past it is ahead. The bar's full width is the target. The bars and ticks are decoration for assistive technology; each row also says its count and its status in text.

What does the foot row say?

The sum of the entries submitted against the sum of the targets, and the pace for the whole season rounded to a whole entry. Both come from CATEGORIES, so adding a category changes them.

Do the bars follow a right-to-left layout?

No: a bar is a quantity on a scale, so it stays drawn from the start of a left-to-right track, as numbers do. The rest of the row, the category, chip and count, mirrors with the page.

Is this a real programme?

No. Streakmoor and the Glendale Awards are made up, and so are the entry counts. Replace them with your own programme and numbers, and keep the caption that says these are entries, not results.

  • Pro

    Win Percentage Awards

    Charts and figures

    A ten by ten waffle of nominations for a sales-analytics tool: won squares filled, shortlisted outlined, the rest faint, with the share won, a count with its base, and a legend, all derived from the editions.

  • Pro

    Funnel Awards

    Charts and figures

    A selection funnel for a hiring-pipeline tool: five stages from entries to winner as clip-path trapezoids on a log scale, each with its count and how many of the stage before went through.

  • Pro

    Rate Display Awards

    Charts and figures

    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.

  • Pro

    Winning Streak Awards

    Timelines

    Chains of year nodes for a language-learning app: a check for a year won, a hollow node for a year not won, a link joining consecutive wins, with the current streak counted large for the lead category.

  • Pro

    Kanban Stages Awards

    Themed formats

    Three board columns, Entered, Shortlisted and Won, with count headers, an arrow showing the path and award cards that carry a drawn mark and a dated badge.

  • Pro

    Impact Metrics Awards

    Lists and tables

    A ruled list of three awards for a CI/CD service, each with a drawn mark, the programme and year at the start and, at the end, the three measured results it recognised with the change in words.

All 137 awards blocks