Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Year In Review Awards Block for Radix UI

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.

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

Overview

A year-in-review recap for React with Radix 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.

What do screen readers hear?

The heading, then the four figures as a description list (label, value, change), then "Top awards" as an ordered list with the programme and category after each award, and "Milestones" as a list with dates in time elements. The seals are hidden drawings.

How does it fit on a phone?

The figures come first in two columns and the lists follow below a ruled line, in one column. Nothing scrolls sideways at 320 pixels.

All 137 awards blocks