shadcn.io is not affiliated with official shadcn/ui
SLA Compliance Dashboard Block for Radix UI
Six customers held to their own contract uptime of 99.9, 99.95 or 99.99 percent for a month you pick, with the minutes down against the minutes allowed, Met or Missed and the service credit owed from a typed schedule.
Installation
Overview
See who got what they paid for with this SLA report for React with Radix UI. A hairline frame with a plus mark on each corner holds a table of six Uptimeledger customers for the month chosen in the header (July, August or September 2026): each row gives the plan, the uptime the contract promises, the uptime reached, the minutes down against the minutes the target allows, Met or Missed, and the credit owed in dollars. The credit comes from a schedule printed under the table: 10 percent of the monthly fee below target, 25 percent below 99.0 percent. The foot adds the credits up, "Credits due: $1,670 across 3 customers", and an outline Issue credits button notes them in the page. A Native Select picks the month and a Button issues the credits. It's built from Native Select, Button and Guides. For managed-service teams and customer success.
FAQ
How do I fill it with my customers?
Edit CUSTOMERS: a name, a plan, the contract target, the monthly fee and down, the minutes of downtime in each month. MONTHS holds each month's label and its minutes. Uptime, the minutes allowed, Met or Missed, the credit, the header sentence and the foot are all worked out from those.
How is the credit worked out?
From the uptime reached against the contract target. Below the target the credit is 10 percent of that customer's monthly fee; below 99.0 percent it is 25 percent. Meeting the target gives none. The schedule is two constants at the top of the file, so replace them with the terms in your contracts.
Why can uptime look equal to the target and still say Missed?
Uptime is cut to two decimals, never rounded up, but Met or Missed is decided from the minutes: a customer is Missed once its minutes down pass the minutes allowed. The table shows both, so the verdict can always be checked against the two numbers beside it.
What does Issue credits do?
It only notes the credits for the month in this page. The status line says how many and how much, and that nothing was issued, and the button changes to Credits noted and stays quiet. Choosing another month starts from that month's own credits. To make it real, post the rows to your billing system as credit notes.