KQ-541 · UPTIME/STRIP
Uptime Strip
Ninety days of service history, one bar each: the bars grow from the baseline in a single cascade on glide, and incident days carry a second bar that swells and fades on drift so the bad days pulse once without anything blinking. The header percentage rolls its digits on glide rather than swapping. The strip is a listbox — the pointer reads whichever bar it is over, Left and Right walk the days, Home and End jump to the oldest and today, and the reading follows along the strip, clamped inside the strip's own box so nothing shifts.
KQ-541 · UPTIME/STRIP
Gaugeworks API99.88%uptime
90 days ago4 incidentsToday
Gaugeworks Webhooks99.39%uptime
90 days ago9 incidentsToday
Gaugeworks Dashboard99.75%uptime
90 days ago5 incidentsToday
Hover or focus a strip to read a day
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/uptime-strip
Props
- days
- { date: string; status: "up" | "degraded" | "down" | "none"; note?: string }[]
- default —
- Ninety entries, oldest first.
- label
- string
- default —
- Service name.
- uptime
- number
- default —
- Percentage shown in the header; it rolls to each new figure.
- format
- (value: number) => string
- default two decimal places
- Formats the header percentage.
- onReadChange
- (day: UptimeDay | null, index: number) => void
- default —
- Fires with the day under the pointer or the keyboard cursor; null on leave.
| Prop | Type | Default | Description |
|---|---|---|---|
| days | { date: string; status: "up" | "degraded" | "down" | "none"; note?: string }[] | — | Ninety entries, oldest first. |
| label | string | — | Service name. |
| uptime | number | — | Percentage shown in the header; it rolls to each new figure. |
| format | (value: number) => string | two decimal places | Formats the header percentage. |
| onReadChange | (day: UptimeDay | null, index: number) => void | — | Fires with the day under the pointer or the keyboard cursor; null on leave. |