shadcn.io is not affiliated with official shadcn/ui
Severity Ladder SLA About Block for React Aria
An incident tool's four severities as bands, each with its response and resolution drawn as bars to scale on one log time axis, a compliance figure and a framed note on credits.
Installation
Overview
A service-commitment section for React with React Aria, written for Pagerhaven, a fictional incident-management tool. A start header sits over a ladder of four severities, P1 to P4, as bands ruled from rail to rail. Each rung says what puts an incident there, how fast we respond and how fast we resolve, and draws both times as bars to scale on one shared time axis: a log axis from ten minutes to ten days, its ticks written along the top and hairlined through every rung. The share of incidents that met both targets last quarter closes each row. A framed note below says what we credit when we miss. On a phone the labels wrap above the bars and the bars keep their scale. It's built from Badge and Guides, with CSS transitions and your theme's tokens for every colour. For an about page, a trust page or a contract summary. The times, figures and credits are example terms.
FAQ
How do I change the severities and their times?
Edit RUNGS at the top: each has a level, a name, a plain-words trigger, the response and resolution in minutes and the same times written out for people ("4 hours"). The bar lengths come from the minutes through placeOf, so they always agree with the axis. The compliance figures and the credit terms are example data.
Why is the axis logarithmic?
Fifteen minutes and a week are four decimal orders apart; on a straight axis the P1 response would be invisible. A log axis keeps every bar readable and still keeps them to scale against each other. The axis says "Time, log scale", and every time is also written as text next to its bar.
How is it read by a screen reader?
The ladder is an ordered list; each rung has a heading ("P1 Critical"), its trigger and a description list with the two times. The bars and the axis are decoration and hidden from assistive technology, because the same facts are in the text.
Where is the colour?
There is none: the response bar is the foreground, the resolution bar a lighter tone of it, and the grid is hairlines. A severity is a name and a label, never a colour.