UptimeStrip
Per-service trailing-day availability strip with state-coded squares and uptime percentages.
Source
"use client"
import { UptimeStrip } from "@/registry/warren/uptime-strip/uptime-strip"
/** 30-day trailing window, three services with mixed states. */
const SERVICES = Array.from({ length: 3 }, (_, s) => {
const names = ["API", "WORKER", "GRAPH"]
const days = Array.from({ length: 30 }, (_, d) => {
// Deterministic pseudo-pattern: mostly operational with sparse incidents
const phase = (d * 7 + s * 13) % 30
const state =
phase === 4 ? "outage" : phase === 17 || phase === 22 ? "degraded" : "operational"
return {
date: `2026-07-${String(d + 1).padStart(2, "0")}`,
state,
incidents: state === "operational" ? undefined : 1,
}
})
return { name: names[s], days, uptimePct: [99.87, 93.33, 96.67][s] }
})
export default function UptimeStripDemo() {
return (
<div className="flex flex-col gap-3 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
AVAILABILITY · TRAILING 30 DAYS · TOOLTIPS ON
</span>
<UptimeStrip services={SERVICES} window={30} showTooltips />
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/uptime-strip.jsonUsage
import { UptimeStrip } from "@/components/ui/uptime-strip"<UptimeStrip
services={[{ name: "API", days: [{ date: "2026-08-21", state: "operational" }], uptimePct: 99.9 }]}
window={90}
showPercent
/>Encoding
One row per service: a mono uppercase label, a right-aligned grid of square day cells
(oldest → newest), and the uptime percentage in mono tabular numerals. Cell color is looked
up from the day state — operational → success, degraded → warning, outage →
danger, nodata → empty track — signal color = state, never decoration. Unknown states
fall back to the track.
The window (30 / 60 / 90) selects the trailing slice of each history, right-aligned:
a service with fewer days than the window pads on the left so every row lines up on the same
calendar span (sliceWindow in window.ts).
When showPercent is on and a row omits uptimePct, the percentage is computed from its
visible slice as the share of non-nodata days that are operational.
Interactive
Source
"use client"
import { useState } from "react"
import { UptimeStrip, type UptimeDay } from "@/registry/warren/uptime-strip/uptime-strip"
const SERVICES = [
{
name: "API",
days: Array.from({ length: 60 }, (_, d) => {
const phase = (d * 11) % 60
const state =
phase === 9 ? "outage" : phase === 30 || phase === 45 ? "degraded" : "operational"
return {
date: `2026-06-${String(d + 1).padStart(2, "0")}`,
state,
incidents: state === "operational" ? undefined : 1,
}
}),
uptimePct: 95.0,
},
]
export default function UptimeStripInteractive() {
const [last, setLast] = useState<string | null>(null)
const onSegmentClick = (service: string, day: UptimeDay) =>
setLast(`${service} · ${day.date} · ${day.state}`)
return (
<div className="flex flex-col gap-3 border-2 border-border bg-panel p-2">
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
AVAILABILITY · TRAILING 60 DAYS · CLICK A DAY
</span>
<UptimeStrip services={SERVICES} window={60} onSegmentClick={onSegmentClick} />
<span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
LAST CLICK: {last ?? "—"}
</span>
</div>
)
}
With onSegmentClick(service, day), day cells render as real <button>s and the container
flips from role="img" to role="group". Every cell carries an aria-label of the form
"<service> · <date>: <state> (N incidents)"; set showTooltips for native title tooltips.
API Reference
Prop
Type
Prop
Type
Prop
Type