shadcn.io is not affiliated with official shadcn/ui
Year In Review Awards Block for React
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.
Installation
Overview
A year-in-review recap for React with Base UI. A split behind a solid divider with + marks. At the start, the heading and a "2025 compared with 2024" description list of four figures (awards won, shortlist places, categories, win rate), each with the previous year's value and its change in words and an arrow, never colour alone: "Up 3 from 2 in 2024", "No change from 5 in 2024". At the end a "Top awards" list of three, ranked by tier and then date, each with a small drawn seal, and three milestone rows with their dates. Every figure, the ranking and the change are counted from one list of entries. It's built from Guides, the catalog DataList, Lucide arrows, inline SVG marks and your theme's tokens. The awards and the programme are made up for the example: replace them with your own.
FAQ
How do I change the entries and the years?
Edit ENTRIES: each is a shortlist place with a title, a category, a fixed date, a shape, a tier and won. The two years compared are the latest year in the list and the one before it, and every figure is counted from the entries of those years. The header line, the changes and the win rate update with them.
How are the top awards ranked?
Among the latest year's wins, the higher tier comes first, and a tie goes to the earlier date. The rule is written under the heading so nobody has to guess. Change tier or the date to change the order.
How is a change written?
changeOf compares the two values and returns the direction and the words: "Up 3", "Down 1" or "No change", with " points" after the number for the win rate. The arrow icon is only a companion; the words carry the meaning, and the arrows do not mirror in a right-to-left layout because up and down do not.
Are the milestones counted?
They are typed rows (MILESTONES) with a fixed date, a title and a line of detail, newest first. Nothing else in the block depends on them.
Related
- 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
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.
- 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
Split Stats Awards
Charts and figuresA 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.
- 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
Trend Arrows Awards
Lists and tablesA ruled table for an investing app comparing five award measures this year and last year, with the change as an arrow icon and words (up 4, flat, down 1) so a change is never told by colour alone.