shadcn.io is not affiliated with official shadcn/ui
Sentry Grid Integration Block for React Aria
An integration grid section for a release gate working with Sentry: six conditions that hold a deploy in a framed grid of shared hairlines, each a checkbox with number fields for its limits, and a sentence worked out from the ticks.
Installation
Overview
An integration grid section for React with React Aria, written for Hatchway, a fictional release gate, and its Sentry connection. A compact header ("When a deploy should wait") has the mark pair at its end. Under a band rule, a polite status line says how many conditions would hold a deploy and what stays local. Below it, six conditions fill a framed grid of shared hairlines, three by two on a wide screen and one column on a phone: a new issue in the release, crash-free sessions dropping below a percentage (a choice of 99, 99.5 or 99.9), a resolved issue that comes back, errors rising a number of times within some minutes, p95 transaction duration above some milliseconds, and a missed cron monitor. Each is a checkbox with a title and a line saying where the data comes from; the ones with a limit carry number fields that switch off with the checkbox. The sentence ("Hatchway holds the deploy when any of 3 conditions is met") is worked out from the ticks. The block ends on its frame. The page's rails and top rule come from the Guides spine. It's built from Guides, Checkbox, Field, Native Select and Number Input, with your theme's tokens for every colour. Sentry is named in text only: no Sentry logo, colour or wordmark ships with the block. Nothing is sent to Sentry, and the conditions and limits are example data.
FAQ
How do I change the conditions and their limits?
Edit CONDITIONS at the top of the file. Each condition has an id, a title, a note, whether it starts on and a list of thresholds; a threshold carries its words around the number (prefix and suffix), its starting value and its min and max. The count in the sentence and the status line come from which conditions are ticked.
Does ticking a condition change anything in Sentry?
No. Ticks and numbers change this page's state only, and the status line, present from the first paint, says so after each change: "Cron monitor is on in this demo. Hatchway holds the deploy when any of 4 conditions is met. Changes stay on this page. Nothing is sent to Sentry." In a real product, Hatchway would read crash-free sessions, issues and transaction durations from Sentry and decide in its own gate; this block only sets up the rules.
Why is the crash-free limit a choice and the others numbers?
Crash-free limits are almost always 99, 99.5 or 99.9 percent, so that one is a native select with those three values; typing a decimal into a number field behaves differently from library to library, and a select works the same everywhere. The other limits are whole numbers with steppers and a range (errors rising 1 to 100 times within 1 to 60 minutes, p95 above 800 milliseconds). Unticking a condition switches its field off but keeps what you chose or typed.
How is it named for keyboards and screen readers?
Each checkbox is named by its condition's title and described by its note, and each number field is named for what it sets ("Crash-free sessions threshold, percent"). The grid is a real list of six items, the status line is a polite live region, and focus rings are visible on every control.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the six conditions stack in one column and their number fields wrap under the title. In a right-to-left layout the grid and each cell flip, and the numbers keep their own direction. The header fades up once on load, which reduced motion turns off.