shadcn.io is not affiliated with official shadcn/ui
API Health Dashboard Block for Ark UI
Eight endpoints against six probe locations as a matrix of pass, slow and fail cells, with a slider for how many locations must fail before an endpoint counts as down, and a reading for the chosen one.
Installation
Overview
Answer "is it down, or only one region?" with this probe quorum panel for React with Ark UI. Inside a hairline frame with a plus mark on each corner, a matrix shows eight Probehall endpoints from three services against six probe locations. Each cell is a glyph and its response time: a check for a pass, a triangle for a slow answer, a solid cell marked Fail for a probe that didn't answer, never only a colour. A Slider sets how many locations must fail before an endpoint counts as Down; fewer than that is Regional and none is Healthy, and the header counts and each row's state follow. Choosing an endpoint reads its six response times in the side cell and names the slowest location. It's built from Slider and Guides, with CSS entrances only. For status pages, uptime tools and on-call dashboards.
FAQ
How do I fill it with my probes?
Edit LOCATIONS and ENDPOINTS. Each endpoint has an id, a method, a path, a service and readings: one response time in ms for each location in order, or null for a probe that failed. SLOW_MS is where a passing probe starts to count as slow. States, counts and sentences are worked out from the readings.
What does the quorum slider do?
It sets the number of failing locations at which an endpoint is Down, from 1 to 6 (default 3). With 3, an endpoint failing from two locations reads Regional and one failing from three reads Down. Slow answers are not failures and never count toward it. Moving the slider rewrites every row's state and the three counts at once.
What stays local, and how do I wire it for real?
Everything: nothing is probed, the readings are typed for a fixed time and the matrix never refreshes. To make it real, feed readings from the latest result of each probe, keep the time shown in the note next to them, and decide your own quorum default.
How is the matrix read by a screen reader?
It's a table with a caption, column headers named by location (the airport-style codes are visual; the full names are read) and a row header for each endpoint. Every cell says the location, whether it passed, was slow or failed, and its time in milliseconds. The chosen endpoint's button is marked with aria-current, and a polite status line reports the new counts when you move the slider.