shadcn.io is not affiliated with official shadcn/ui
Winning Streak Awards Block for React Aria
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.
Installation
Overview
Winning streaks for React with React Aria. A start-aligned header with a two-item legend at its end sits above a band of three chains, one for each category, ruled from rail to rail with + marks and ending the block. A chain is an ordered list of year nodes, from 2019 to 2025: a filled node with a check for a year won, a hollow node for a year not won, and a solid link joining two consecutive wins. The current streak (the unbroken run of wins that ends in the latest year) is counted large for the lead category, which comes first, and smaller for the two shorter chains, each with its base ("6 of 7 editions won"). The chains read in time order in both text directions. It's built from Guides, a check icon and your theme's tokens. The Slateton Awards and the wins are made up for the example.
FAQ
How do I change the wins?
Edit LEAD and CHAINS at the top of the file. Each chain has an id, a name and wins: the years it won, each a fixed number. FIRST_YEAR and LAST_YEAR set the window of editions drawn. The links, the streaks and the "5 of 7 editions won" lines are all counted from the lists; nothing else needs editing.
What counts as the current streak?
The unbroken run of wins that ends in the latest year in the window. A category that skipped the latest year has a streak of zero, and a category that missed a year in the middle starts counting again after it. runFrom counts back year by year until it finds a gap.
How do the chains fit a phone?
Seven nodes share a row in a grid, the nodes and their years shrink, and each row stacks its heading and streak above the chain. They fit down to 320 pixels, so nothing scrolls sideways. If you widen the window past about nine years, wrap each chain in a region that scrolls sideways and takes focus.
How do screen readers read a chain?
Each chain is an ordered list named with its category and the range of editions. Each item reads as its year followed by "won" or "not won", and the drawn nodes and links are hidden from assistive technology. The legend and the streak are plain text. Years sit in bdi elements and the chains are drawn left to right in a right-to-left layout too, since time reads that way.