shadcn.io is not affiliated with official shadcn/ui
Release Band SLA Compliance Block for Svelte
A band of three release cells for a managed-service reporting product: uptime, p95 response and first reply with the target beside the actual, a check or a ring for each, and a breach count in each foot.
Installation
Overview
An SLA compliance block for Svelte with Ark UI. A centred header counts the targets met across three releases ("8 of 9 SLA targets met across three releases"), and one band ruled from rail to rail ends the block. The band has a cell per release (v7.0.0, v7.1.0 and v7.2.0), side by side from md and stacked on a phone. Every cell has the same four rows: the version and date, three metrics (uptime, p95 response and first reply) with the actual value large and its target beside it under a check or a ring, and a foot that counts the release's breaches. Whether a target is met is computed from the actual, the target and the direction that is better for that metric, so the glyphs, the counts and the title always agree. The one breach reads "Missed by 0.04 points" with the destructive dot and the words. It's built from Guides and Status, with your theme's tokens for every colour and CSS only for the entrance.
FAQ
How do I change a target or a reading?
Edit the three kinds at the top of the file (UPTIME, RESPONSE, REPLY: label, unit, digits, which direction is better, the target) and the readings on each release. A target is met when a "higher is better" actual is at or above it, or a "lower is better" actual is at or below it. The glyph, the "missed by" gap, the breach count in each foot and the number in the title are computed from that, so nothing has to be kept in step by hand. The figures in the block are example data.
Why is the only coloured mark the destructive dot?
A check or a ring is enough to say met or missed, and each has the word as hidden text ("Met:", "Missed:") for screen readers. The destructive dot marks the one real alert, a breached target, and sits beside the words "Missed by 0.04 points", so colour is never the only signal. A release with no breach shows no coloured mark at all.
How do the rows line up across the three cells?
The list is a grid and every cell spans the same five rows through a subgrid, so the version row, the three metric rows and the foot sit at the same height in every cell even when one cell's text wraps. The cells are separated by hairlines that run the band's full height.
What changes on a phone?
The three cells stack with a hairline between them, each still four rows. The band runs rail to rail and ends the block, so nothing scrolls sideways at 320 pixels and the figures keep their width.