shadcn.io is not affiliated with official shadcn/ui
Severity Ladder SLA About Block for React
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 Base UI, 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.
Related
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Response Times Matrix About
Support and contactSupport promises as a framed matrix of channels by plan, each cell giving the promised first response and last quarter's median, with the Enterprise column ringed and a status dot per channel.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Domain Tabs Security Practices About
Security and platformSecurity practices for a password manager in four domain tabs, each a list of controls marked Done or Rolling out, under a security score worked out from the controls.