Skip to content
shadcn.io

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Is anything told by colour alone?

No. Every bar has its count printed above it, the latest week and the latest award are outlined, and strong and pale bars are steps of your foreground colour, not a brand or status colour.

Are these real awards?

No. Risemap, the Fablewick Quarterly and the Elmwick Register are made up for the example.

  • Pro

    Growth Staircase Awards

    Charts and figures

    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.

  • Pro

    Count By Year Awards

    Charts and figures

    A 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

    A 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

    A 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 figures

    A 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 search

    Underline 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.