Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

System Uptime Report Monitoring Block for Svelte

A quarterly reliability report in four tabs: uptime as one figure, downtime used against the allowed target as a bar, three incidents as split bars on one minutes axis, and the mean time to detect, respond and repair.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Report a quarter of reliability in one glance, and show where recovery time went, with this uptime report for Svelte with Ark UI. It is Ninesworth, a reliability reporting tool, with a Tabs list for Q4 2025 to Q3 2026. Every tab holds the same three bands in a hairline frame with a plus mark on each corner. The first gives the quarter's uptime as one figure ("99.96%") and a bar of the downtime used against the downtime a 99.95% target allows, with a tick at the allowance; the bar runs on past the tick when the quarter went over, and the words say so. The second lists the quarter's three incidents as ruled rows, each a bar split into Detect, Respond and Repair in three weights on one minutes axis shared by all four quarters, so a long repair looks long in every tab. The third gives the mean time of each phase and a sentence ("Repair is 61% of recovery time"). All of it is worked out from the typed minutes. Guides draw the frame and its bands. For reliability reviews, service-level reports and any team that explains its downtime.

FAQ

How do I load my own quarters?

Edit QUARTERS: each has its days and a list of incidents with the day it began and the minutes spent detecting, responding and repairing. TARGET is the uptime goal. Uptime is 100 - used / (days * 1440) * 100, cut to two decimals; the allowance is days * 1440 * (100 - TARGET) / 100; the means and the repair share are worked out from the incidents, and the shared axis is the longest incident of any quarter rounded up to a ten.

What do Detect, Respond and Repair mean?

Detect is the time from the failure to an alert, Respond from the alert to someone taking it, and Repair from there to the fix. The three are drawn as weights of the same bar, from light to solid, and spelled out under each bar, so they read without colour. Rename them in PHASES if your process uses other words.

Is anything measured?

No. The incidents and their minutes are typed examples, and the page says so in its text rather than showing a live badge. Choosing a tab only changes which quarter is shown. In your app read the quarter's incidents from your incident tool and keep the same shape.

How do the tabs behave?

They are standard tabs: arrow keys move between them and the panel follows. Each quarter has three incident rows and fixed row heights, so switching tabs does not move the frame.

How does it look on a phone?

The figure and the budget bar stack, each incident's phase minutes sit under its bar, and the four tabs share the width of the frame.