shadcn.io is not affiliated with official shadcn/ui
Deployment Status Dashboard Block for React
The four DORA measures worked out from thirty deploys, each with a band word, an environment toggle, and one bar per deploy whose height is its duration, with failed deploys hatched and readable one by one.
Installation
Overview
Show how healthy your delivery is with this deployment status dashboard for React with Base UI. A compact header holds the title and a Toggle Group that picks Production, Staging or both, and a hairline frame below it holds four figures worked out from thirty Launchbay deploys: how often you deploy a week, the median time from commit to deploy, the share of deploys that failed and the median time to restore after one. Each carries a band word, Elite, High, Medium or Low, from thresholds named at the foot. Under the figures every deploy is a bar, tall for a slow one and hatched when it failed; choose a bar to read that deploy's commit, team, duration and result in a sentence. A list of the failed deploys says how long each took to restore. It is built from Toggle Group, Badge and Guides. For delivery and platform teams.
FAQ
How do I use my own deploys?
Replace buildDeploys with your list. Each deploy needs a time, its duration in seconds, whether it failed, the minutes from commit to deploy, the minutes it took to restore if it failed, and whether it went to Production. The four figures, the bands, the bars and the failed list are all worked out from that list.
Where do the band words come from?
They follow the four DORA tiers, rounded, and the thresholds are written under the figures: Elite is 7 or more deploys a week, a median lead time under a day, 5% or fewer failures and a median restore under an hour. The edges live in the four band functions near the top of the file, so you can move them to your own.
How do I read a single deploy?
The bars are one tab stop. Arrow keys move along them, Home and End jump to the ends, and the chosen deploy is read in the status line under the chart. Clicking a bar does the same. Each bar's name has its commit, time, duration and result.
What does the toggle change?
Which deploys count: every figure, the bars and the failed list recompute for Production, for Staging or for both. The chosen deploy stays chosen if it is in the new set; otherwise the newest one is read.