ComponentsData display

Uptime bars

Per-period status bars for one service — the uptime row of a status page or a health panel. Hover or focus a bar for its date, state and uptime; the row is one tab stop with arrow-key movement, and a summary line shows the uptime over the range. Bad days also dip in height, so state never rests on colour alone.

Tooltip (Radix) + roving tabindex components/uptime-bars.tsxtheme · material · accent · density · font

Last 60 days

Operational
Degraded performance
Partial outage
Major outage
Maintenance
No data

Public API
60 days ago99.97% uptimeToday
Webhooks
60 days ago99.99% uptimeToday
Dashboard
60 days ago99.98% uptimeToday

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { UptimeBars, UptimeLegend } from "@vamos-ui/react";

<UptimeLegend />
<UptimeBars name="Public API" bars={days} onBarSelect={(day) => openIncident(day.date)} />

Tooltips never show on touch: every fact in a tooltip is also in the bar's accessible name, so put what matters in note, not only details.

Colours come from the status tokens (success, warning, danger, info, track); percentages from the locale formatter ("99.95%" / "%99,95").

Examples

Open an incident from a bar

onBarSelect runs on click and Enter; selectable: false makes quiet days inert (aria-disabled). details adds rich tooltip content.

30 days ago99.96% uptimeToday

Days with an incident open it — try the red bar.

Weekly periods

label replaces the formatted date; startLabel / endLabel rename the summary ends; precision sets the decimals.

12 weeks ago99.942% uptimeThis week

API

UptimeBars

Prop	Type	Default
`bars` Periods, oldest first.	`UptimeBar[]`	`—`
`name` Service name — names the row for screen readers ("Public API, uptime history").	`string`	`—`
`uptime` Summary figure 0–100. Default: uptimePercent(bars).	`number`	`—`
`precision` Fraction digits of uptime figures.	`number`	`2`
`dateFormat` Date in the tooltip and accessible names.	`DatePreset \| Intl.DateTimeFormatOptions`	`"medium"`
`onBarSelect` Click / Enter on a selectable bar.	`(bar, index) => void`	`—`
`severity` Bars dip by severity (degraded → partial → major); maintenance is hatched, no data is dashed.	`boolean`	`true`
`summary` Start · uptime · end line under the bars.	`boolean`	`true`
`startLabel / endLabel` Ends of the summary line.	`ReactNode`	`"{n} days ago" / "Today"`
`legend` Legend under this row (use UptimeLegend once for a list).	`boolean`	`false`
`labels` Dictionary namespace "uptimeBars": state names, uptime, rowLabel, start, end, legend, selectHint.	`Partial<UptimeBarsLabels>`	`—`

UptimeBar

Prop	Type	Default
`date` "YYYY-MM-DD" or ISO instant.	`string`	`—`
`status` State of the period.	`"operational" \| "degraded" \| "partial" \| "major" \| "maintenance" \| "none"`	`—`
`uptime` 0–100. Missing counts as 100 in the summary.	`number`	`—`
`label` Period name instead of the date ("Week 42").	`string`	`—`
`note` Plain text in the tooltip and the accessible name.	`string`	`—`
`details` Extra tooltip content (not read as the name).	`ReactNode`	`—`
`selectable` With onBarSelect: false makes the bar inert.	`boolean`	`true`

UptimeLegend

Prop	Type	Default
`statuses` States to list. Default: all six.	`UptimeStatus[]`	`—`
`severity` Swatches match the bar heights.	`boolean`	`true`

uptimePercent(bars)

Prop	Type	Default
`returns` Mean uptime of the bars with data.	`number \| null`	`—`

Typography

User picker