shadcn.io is not affiliated with official shadcn/ui
Release Pins Service Health Dashboard Block for React Aria
A health board for a hosting product: four service lanes of thirty daily cells, with a row of release pins above them that open a card of what shipped, and the month's uptime at the end of each lane.
Installation
Overview
A service health dashboard for React with React Aria, drawn around releases. The header counts the state and the month's releases from the data ("All systems operational, 3 releases this month"). One inset frame holds four service lanes of thirty slim cells, one per day: a foreground tone for a day with no downtime, an outlined cell for a day that had some, and the month's uptime at the lane's end. Above the lanes a row of pins marks the day each version shipped; each pin is a link, and hovering or focusing it opens a card with the version, the date and what changed. Under the lanes, a legend names the marks and the three releases are listed as cells, so touch and keyboard readers get what the cards show. On a phone the lanes show the last fourteen days and the pins stay. It's built from Guides, Badge, Status and Hover Card, with your theme's tokens for every colour and no motion library.
FAQ
Where do the uptime figures come from?
Each lane holds a typed list of { day, minutes } entries. The month's uptime is 1 - minutes down / minutes in the month, rounded to two decimals, so the figure, the outlined cells and the lane's one-line note always agree. The one lane under the 99.9% target takes the warning dot and says "under the 99.9% target" in words. The numbers in the block are example data.
How do I add a release pin?
Add an entry to RELEASES with an ISO date, a version, a title, a summary and a kind. The pin's place along the lane is computed from the day of the month, for the thirty-day layout and for the phone's fourteen days, and the card and the list under the lanes read the same entry. The header counts RELEASES.length.
What happens on a touch screen, where there is no hover?
The hover card is a convenience, not the only way in. The same version, date and summary are always on the page in the list of release cells under the lanes, and each pin is a link that a screen reader announces with its version, date and title. The card is React Aria's preview trigger: it opens on hover and on keyboard focus.
Why do the lanes show fewer days on a phone?
Thirty cells would be about nine pixels wide at 320 pixels. Below the sm breakpoint the cells older than the last fourteen days are removed, the track switches to fourteen columns, and the pins from those days are hidden with them. The month's uptime still covers all thirty days, and a line under the legend says the view is the last fourteen days.
Why are the cells grey and not green and red?
The block follows your theme and uses foreground weights, so it reads in every preset and for people who can't tell green from red. A normal day is a solid cell and a day with downtime is an outlined cell, and every lane also says it in words. Only the lane that missed its target uses a status colour, once.