Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Deployment Status Monitoring Block for Radix UI

Six deploys with a chosen signal before and after as two numbers, an arrow, a signed change and a word (Worse, Same, Better), a select for error rate, p95 latency or CPU, and an hour plot with the deploy as a pin.

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

Show what each deploy did to a signal, not just that it shipped, with this deployment status panel for React with Radix UI. It is Shipharbor, a deployment tracker. A Native Select in the header picks the signal (error rate, p95 latency or CPU), and a table of six deploys (version in mono, environment, time, who shipped it) shows the signal's average over the 30 minutes before and the 30 minutes after as two numbers, an arrow, a signed change and a word: Worse, Same or Better, decided by a change of 5% or more. The header sentence compares the two newest deploys ("v2.4.12 raised p95 latency by 38 ms; v2.4.11 changed nothing."). Choosing a deploy draws the hour around it in a hairline frame with a plus mark on each corner: the signal as a line, the deploy as a pin in the middle, the two windows bracketed and each window's average as a dashed line. The figures are typed averages and the hour is a steady wobble around them. Guides draw the frame and its bands. For release reviews, rollback decisions and anyone asking whether a deploy hurt.

FAQ

How do I load my own deploys?

Edit DEPLOY_LINES: version, environment, time, the author's initials, then the before and after averages for the error rate, p95 latency and CPU. The verdict, the arrow, the change and the header are worked out from those. In your app compute the two 30-minute averages from your metrics store and keep the same shape.

How are Worse, Same and Better decided?

A rise of 5% or more over the before average is Worse, a fall of 5% or more is Better, anything else is Same. NOTICE holds the threshold and the status line states it. A small absolute change in a tiny rate can still be Worse, which is why the share is used, not the size.

Is the hour real?

No. The line is generated from the two averages with a steady wobble and a short ramp at the deploy, so it is the same on every load. In your app plot the real samples with the same path helper.

What stays local?

Everything: the deploys, the averages and the hour are typed examples and nothing is measured. Choosing a deploy only moves the plot and writes a sentence in the status line.

How does it look on a phone?

The table folds to the version (with its environment and time under it) and the change; the other columns return from wider widths. The plot keeps its height and the select stays under the sentence.

All 100 monitoring blocks