Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Milestone Lanes Awards Block for React Aria

Two lanes on one quarter axis for a roadmap tool: company milestones above, awards below, a stepped hairline from each award to the milestone before it and the gap counted in months.

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 milestones-and-awards view for React with React Aria. Eight quarters run along an axis band from Q1 2024; the company's milestones (the public launch, 1,000 customers, a Series A, version 2) sit in a lane above and the awards that followed in a tinted lane below, with a solid stepped hairline from each milestone down to the award it led to and the gap counted from the two dates ("4 months later"). The lanes are two ordered lists; the axis, the steps and the + marks are drawings. Below the lg breakpoint the same pairs become one list, each award under its milestone with the gap between them. It's built from Guides, a CSS grid and your theme's tokens. The milestones and awards are made up for the example: replace them with your own.

FAQ

How do I change the milestones and awards?

Edit PAIRS: each pair holds a milestone (a date and a title) and the award that followed it (a date, title, programme, category and shape). The quarter of each date places it on the axis, so keep each award in the quarter after its milestone, the way the connectors are drawn. The header and the "N months later" labels are counted from the dates.

How is the gap counted?

monthsBetween takes the days between the milestone and the award, divides by 30.44 and rounds, never below one month, so 4 February to 30 May reads "4 months later". The header names the shortest and longest gap in the list.

Can the axis cover more quarters?

It is set up for eight columns: QUARTERS and the COL_START classes are both eight long, and the grids use grid-cols-8. For a longer axis, extend those three together; the classes are written out so Tailwind generates each one.

What do screen readers hear?

Two lists, "Milestones" and "Awards". Each award reads its title, its programme and category, its date, and then the gap with the milestone it followed ("3 months later, after 1,000 customers"). The axis, the diamonds and the steps are hidden drawings.

What replaces the lanes on a phone?

One list of pairs: a milestone with its date and title, and under it, behind a short vertical line, the gap and the award. Below lg the lane layout is hidden, so only one version is ever read.

Does the axis flip in a right-to-left layout?

No. Time runs from the start of the axis to its end the same way in any language, so the lane area keeps its own direction while the rest of the block follows the page.

All 137 awards blocks