shadcn.io is not affiliated with official shadcn/ui
No Uptime Checks Empty State Block for React
An uptime monitor's empty list as a setup form: an address, a check interval, three regions and a derived checks-a-day line, a flat heartbeat line with a dashed first spike, and one Add monitor button with a simulated check.
Installation
Overview
Turn an empty monitor list into the first monitor, with this no uptime checks empty state for React with Base UI. A hairline frame with a plus mark on each corner holds the monitor list of Thrumwick, an uptime monitor, as bands: a list that is one dashed row until there is a monitor, then a split of a form and a drawing. The form is the address to watch, a native Select for how often (every 1, 5 or 10 minutes) and three Checkboxes for the regions to watch it from, with a line that works the checks a day out from both, such as "864 checks a day from 3 regions". At its end a drawing of a flat heartbeat line whose first spike is only dashed, over one row per region. The Shine Button, the only colored control, Add monitor, lists the monitor and turns the first spike solid; Run a check then simulates one check that answers region by region and adds a spike. The bands are ruled by Guides, and everything moves with CSS only. For the first screen of any status, monitoring or reliability tool.
FAQ
What stays in the page, and how do I make it real?
No address is called and nothing is saved. The monitor is a row in the page's state, the host is made up and the answer times are typed (two runs of three). To wire it for real, save the monitor with your API where the code says so, run the checks from your regions, and draw the spikes from the results instead of the typed ones.
Where does the checks-a-day line come from?
It is worked out from the form: a day has 1,440 minutes, so every interval makes that many divided by its minutes, times the regions you ticked (every 5 minutes from 3 regions is 288 times 3, 864). It changes as you change either, and with no region ticked it says to pick one, which is also what the Add monitor button says when pressed.
What does Run a check do?
It starts a simulated check that a press begins: the region rows say Checking and then give a typed answer time one after another, about a second in all, and a spike is added to the line when the last one answers. It is limited to two runs and cannot be started while one is running; nothing is requested.
Why are the fields locked after adding?
So the panel never changes height and the list row stays true to what was added. The form is made unavailable rather than replaced; Start over, which stays quiet until something has changed, brings back an empty list, a flat dashed line and a fresh form with focus in the address field.
Does the panel change height?
No. The list is one row high dashed or filled, the region rows are one height in every state, and the foot has a place for its line. On a phone the drawing and the region rows sit below the form, and the foot is pinned to the bottom of the screen so Add monitor is always in reach.
How does it work with a keyboard?
Tab runs through the list's button, the address, the interval, the three regions and the foot. The interval is a native select, so its own keys and its system list apply. The drawing is hidden from assistive technology; the list row, the region rows and the foot say everything it shows.
Related
- Pro
No Performance Data Empty State
Data and analyticsA performance monitor's empty dashboard as the target before the data: tabs for four metrics, a chart of axes with a dashed flat line and target band, a slider that moves the target, a strip of four targets and one Set up monitoring button.
- Pro
No Logs Empty State
Developer toolsA log console window with nothing logged yet: a dashed pipe from an app to a console, four level chips with counts, a Follow switch, a dark console and one Send a test line button that prints the next of twelve typed lines.
- Pro
No Alerts Empty State
MonitoringAn ops status board's quiet alerts page: a bell under a glass dome, four systems that each say Operational with a drawn 30-day strip, and a Send a test alert button that fills a dashed slot with a typed row you can dismiss.
- Pro
No Incidents Empty State
MonitoringAn incident tracker's quiet log: a calendar of 13 weeks of 7 quiet dots, a 30, 60 or 90 day range that re-slices the grid and the line 0 incidents in 60 days, and a Run a drill button that marks one day with a tooltip.
- Pro
No Error Tracking Empty State
Developer toolsAn error monitor's empty list as an install guide: a code window with npm, pnpm and bun tabs and a copy button, an initialise snippet, a Send a test error button that lists one simulated row, and a calm lake whose ring turns solid.
- Pro
No Vulnerabilities Empty State
MonitoringA code scanner's clean results page as a scan scope: four areas with an Include switch each, a Run scan that walks through them in a simulated scan and ends on 0 found, and a shield whose dashed check turns solid.