Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Year Rail Timeline Awards Block for Radix UI

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.

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 rail of awards for React with Radix UI. A start-aligned header counts the awards and the years they span. Under it a vertical rail runs down the start side as a solid hairline, meeting the block's top rule in a + mark; each year (2025, 2024, and behind a "View earlier years" button, 2023 to 2021) has a node on the rail, its number in the gutter before it, and its awards as rows with a small drawn mark, the award, its programme and category, and the date. The rows' hairlines run from the rail to the end of the block, which ends on the button when it is closed. It's built from Guides, a Collapsible, inline SVG marks and your theme's tokens. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.

FAQ

How do I change the awards or how many years show?

Edit AWARDS at the top of the file: each has a title, a programme, a category, a shape for its drawn mark and a fixed date (YYYY-MM-DD). The years, the groups, the header tally and the count on the button are all derived from that list. RECENT takes the newest two years and EARLIER the rest; change the 2 in both slices to show more or fewer on load.

Why are the dates fixed instead of relative?

An award won in 2025 stays 2025, so each one carries its date as data and is formatted in UTC, the same on the server and in the browser. Nothing in the block reads the clock.

How does View earlier years work?

It is the catalog Collapsible: the button toggles the older years, its label stays the same and the library sets its expanded state for assistive technology, and the chevron turns while it is open. The line beside the label counts the hidden years and awards from the same list.

What do screen readers hear?

An ordered list named "Awards by year", each year a heading with its own list of awards, and each award a heading followed by its programme and category and its date in a time element. The nodes and marks are drawings hidden from assistive technology, and each year sits in a bdi element so it keeps its order in a right-to-left layout.

How does it fit on a phone?

The rail and the years stay on the start side in one column. The drawn marks hide below the sm breakpoint to give the text room, and the programme and category wrap under the award. Nothing scrolls sideways at 320 pixels.

Are these real awards?

No. Maplewood, Quartzwick and Illingworth are made up, and the marks are drawn by the block. If you show a real award, use its name in text, and its official badge only if its rules allow it.

All 137 awards blocks