shadcn.io is not affiliated with official shadcn/ui
No Uptime Checks Empty State Block for Ark UI
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 Ark 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.