shadcn.io is not affiliated with official shadcn/ui
Growth Staircase Awards Block for Radix UI
A reverse split for a garden-centre till system: a framed staircase chart of the running total of awards by year with the three biggest years marked, beside the header and a list of three facts.
Installation
Overview
A cumulative growth chart for React with Radix UI. From lg the chart sits at the start in a framed card, a staircase drawn in SVG with a step up every year to the running total, the area under it faint, a plain y axis and the years along the foot; the three years that won the most are marked on their steps ("+7 2025"). At the end are the header and three facts in a description list: the total, the best year and the growth since the first year. On a phone the header comes first, then the chart at full width, then the facts. The chart is built from one SVG path, the page's Guides spine and your theme's tokens: no chart library. The awards are made up for the example.
FAQ
How do I change the awards?
Edit YEARS at the top of the file: each year has a fixed year and an awards array of names, one entry per award. The totals, the running sum, the three marked years, the y axis (it tops out at the next ten above the total), the staircase path and the facts are all worked out from it, so nothing else needs editing.
Which years get a label?
The three with the most awards in that year; a tie goes to the newer year. Each label reads "+" and the count, with the year under it. The labels sit above their own step, so they never cover the line.
Where are the numbers for a screen reader?
The drawing is hidden from assistive technology. Inside the same figure, an unseen table gives each year, what it won and the running total, and the figure's caption names the chart. The facts beside it are a description list.
What does
The total now minus what the first year alone won, shown as "up 23" with the two figures under it. It is a count of awards, not a percentage, and it is derived like every other number.