shadcn.io is not affiliated with official shadcn/ui
System Health Dashboard Block for Radix UI
Four host metrics, CPU, memory, disk and network, each with its reading as a bar and a two-thumb slider for the warning and critical lines, a state word that follows them and a count of the alerts that would fire.
Installation
Overview
Set where a host raises an alarm with this system health panel for React with Radix UI. A hairline frame with a plus mark on each corner holds four Hostbeat metrics on shared hairlines, two by two from the small breakpoint: CPU, memory, disk and network. Each cell shows the current reading as a large figure and a bar, with the warning and critical lines marked on it, and a two-thumb Slider under the bar sets them on the same 0 to 100 scale. The state word beside the metric (OK, Warning or Critical) follows the thresholds as you drag, and the header counts the alerts that would fire, "Alerts that would fire: 2 (CPU, Memory)". A ghost Button in the header puts the thresholds back to the defaults. It's built from Slider, Button and Guides. For host monitoring and alerting settings.
FAQ
How do I fill it with my metrics?
Edit METRICS: a name, a hint, the current value in percent of capacity and the defaults, the warning and critical lines Hostbeat ships with. The bar, the state word, the alert count and the header sentence are worked out from the value and the current lines.
How do the two thumbs behave?
The warning thumb and the critical thumb can't cross and stay five points apart, and each is named by what it sets, such as "CPU: warning at 70%". You can drag them or use the arrow keys, and the header sentence updates as you move. A screen reader hears the new alert count once, a moment after the last move, instead of at every step.
How is the state decided?
A reading at or above the critical line is Critical, at or above the warning line is Warning, and below it OK. The state is always a word with a glyph, never colour alone, and the bar gets heavier from OK to Critical.
What does Reset to defaults do?
It restores all four pairs of lines at once and says so. If they are already at the defaults it says that instead, so the button always answers.
What stays local, and how do I wire it for real?
Everything: the readings are typed, the thresholds live in the page and nothing is monitored or saved, as the line under the cells says. In your app, read live values, save the lines to your alerting rules from a handler and decide who gets paged at each one.