shadcn.io is not affiliated with official shadcn/ui
Momentum Chart Awards Block for React
A 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.
Installation
Overview
An awards momentum view for React with Base UI. At the start of a reverse split a framed figure holds a column chart of the awards won in each of the last eight weeks, drawn in CSS with the count over every bar and the same numbers in a hidden table; the latest week is outlined. At the end, behind a divider, sit a compact header, a two-choice toggle (30 days or 90 days) and a newest-first list of recent awards grouped by day. The toggle decides which bars are strong and which are pale and how far back the list goes, and a live line says how many awards are shown. The block keeps its height, and the latest award is outlined too. It's built from Toggle Group, Guides and your theme's tokens, with CSS transitions. The programmes are made up for the example.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file, newest first: each has a title, a programme, a category and a fixed day. The eight weekly counts, the header's total and the busiest week are counted from that list, starting from FIRST_WEEK, so the bars can't disagree with the list.
What does the toggle change?
The list shows the awards from the last 30 or 90 days counted back from AS_OF, a fixed day, never today. In the chart, a week is strong if any of its days is inside the range and pale if not, and the line under the toggle says how many awards are shown. The chart always shows the same eight weeks.
Does the page jump when I switch?
No. An unseen copy of the longest list sits in the same space and holds the block's height; the shorter list simply ends sooner. The rows of the shorter list are the first rows of the longer one, so none of them moves.
How does it read to a screen reader?
The chart is a drawing hidden from assistive technology, and a table of weekly wins in the figure says the same numbers. The toggle is a group named "Show awards from the last", the list a labelled list with days and awards, and the polite status line announces each change.
Related
- Pro
Growth Staircase Awards
Charts and figuresA 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.
- 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 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
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
Quarter Tabs Awards
Filters and searchUnderline tabs Q1 to Q4 of 2025 for a planning tool, each with its months and award count, a panel of that quarter's dated awards and an empty state for the quarter with none.