shadcn.io is not affiliated with official shadcn/ui
Growth Staircase Awards Block for React
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 Base 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.
Related
- Pro
Count By Year Awards
Charts and figuresA split for a flood-risk analytics tool: a header and a toggle at the start and, at the end, a ruled list of years from 2019 to 2025, each a horizontal bar and its count, counting either awards or programmes.
- Pro
Running Total Counter Awards
Charts and figuresA single framed cell for a usage-metering API with one large rolling number and a row of year buttons: choosing a year rolls the running total of awards to that year and lists its three newest awards.
- Pro
Year In Review Awards
Charts and figuresA recap of 2025 for a podcast app: a 2025 compared with 2024 description list of four figures with their change in words, a ranked list of the top three awards with drawn seals and three dated milestones.
- Pro
Year Rail Timeline Awards
TimelinesA vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.
- Pro
Annual Report Awards
Themed formatsA printed recognition report as a framed page for a farm-management suite: a drawn laurel cover at the start, a Highlights description list with dotted leaders and a four-segment quarter bar at the end.
- Pro
Momentum Chart Awards
Charts and figuresA reverse split with an eight-week column chart of awards won each week at the start and a newest-first list of recent awards at the end, grouped by day, with a 30 or 90 day toggle.