shadcn.io is not affiliated with official shadcn/ui
Split Stats Awards Block for React
A split for an analytics tool: three figures at the start (awards won, a selection rate like 1 in 60 and years running) and Recent highlights at the end, an ordered list of the four newest awards with a small drawn mark each.
Installation
Overview
A stats split for React with Base UI. At the start of the split are the header and three figures in a description list: awards won, the selection rate written as "1 in 60" (entries submitted divided by awards won) and years running. At the end, "Recent highlights" is an ordered list of the four newest awards, each with a small mark drawn in SVG, its category and its date. A divider with a + mark where it meets the top rule separates the halves; on a phone the figures come first and the highlights follow under a rule. It's built from Guides, inline SVG and your theme's tokens. The awards and entries are made up for the example.
FAQ
How do I change the figures?
Edit AWARDS (each with an ISO date, a category, a shape and a title) and SUBMISSIONS (how many entries you submitted each year). The count, the categories, the years running and the selection rate are all worked out from those two lists, and the highlights are the four newest awards.
How is the selection rate worked out?
Total entries divided by awards won, rounded to a whole number and written "1 in N". With 480 entries and 8 awards that is 1 in 60. The detail line under it shows both figures.
How do I change a mark?
Each award names a shape: cup, star, shield, medal or rosette. The shapes live in MARKS, one list of stroked paths in a 24 by 24 box each, drawn in your foreground colour. Add a shape by adding a key. The marks are hidden from assistive technology; the award's name, category and date are text.
How does it read to a screen reader?
The figures are a description list, so each reads as a term and its value. The highlights are an ordered list of headings with the category and the date, and the date is a time element.
Related
- Pro
Big Numbers Awards
Charts and figuresFour display-size figures for an inventory-counting app on shared hairlines (awards won, programmes, categories led and years running), counted up once on view and all derived from one typed list of 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
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
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
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
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.