Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Season Tracker Awards Block for Vue

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 Vue with Ark 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.

All 137 awards blocks