Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Release Calendar Block for React Aria

A three-month ruler of three releases with a feature freeze, a release candidate and a ship date each, a derived line for the next freeze and a Download .ics that saves the nine dates.

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

Put a release train on one ruler with this release calendar for React with React Aria. A hairline frame with a plus mark on each corner holds October to December 2026 and one row per release (5.3, 5.4 and 6.0), each with a Feature freeze drawn as a diamond, an RC1 as a ring and a GA as a solid dot, nine dates in all, and a rule at 14 October, the block's fixed "now". A line above the ruler says how far off the next feature freeze is ("Feature freeze for 5.4 in 6 days."), and choosing a mark states it under the ruler ("RC1 for 5.4, Mon 26 Oct, in 12 days."). Each row says what is next for its release. An outline Button saves the nine dates as a real all-day calendar file in UTC that opens in any calendar app. The ruler scrolls sideways under sticky release names, and a legend gives each mark its shape and its word. It's built from Button and Guides, with a CSS entrance only. For release managers, mobile teams and any product that ships on a fixed rhythm.

FAQ

How do I fill it with my releases?

Edit MARKS. Each has an ISO date, a kind of freeze, rc or ga, a release name and a unique id; RELEASES lists the rows in order. Change RULER_START, RULER_DAYS and RULER_MONTHS to draw a different span. The next-freeze line and every "in N days" are worked out from the dates and AS_OF.

What does Download .ics contain?

One all-day event for each mark, such as "Feature freeze for 5.4" on 20 October, with a typed UID and a typed creation stamp, UTC dates and CRLF line ends as the format requires, saved as trainmoor-releases.ics. It is built in the browser from the same array the ruler reads, so the file always matches what you see. To publish a live feed instead, serve the same text from your own URL.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and the rule, the next-freeze line and every relative date come from it, so the block looks the same on any day and in a screenshot. Marks before it say "ago".

How do I use it with the keyboard?

Every mark is a button that is pressed when it is chosen, named with its kind, release, date and how far off it is. The ruler is also a scroll region you can reach with Tab. The time axis keeps its left-to-right order in right-to-left languages.

Why are the marks shapes and not colors?

Color alone can't be told apart by everyone, and it vanishes in grayscale and in print. A diamond is a freeze, a ring is a release candidate and a solid dot is a general release, and the legend and every button's name carry the word.

What stays local, and how do I wire it up?

The chosen mark and the status line only change the page's state. The download is real, but nothing is sent anywhere. To make the dates live, load MARKS from your release tooling and keep the rest as it is.

All 100 calendar blocks