Skip to content
Twentyfirst UIHalo

Uptime Bar

Data · DeployPipeline, Meter, ServerCard, UptimeBar

Health at a glance: UptimeBar (a bar per day), Meter (usage against a limit), ServerCard, DeployPipeline.

UptimeBar: days ("ok" | "warn" | "danger" | "none" or {status, label, note}), uptime (percent), caption. Hover shows the day.
Meter: label, value, max, text, warn (75), danger (90), tone.
ServerCard: name, provider, address, logo, status, statusLabel, meters ({label, value, max, text, unknown}; value null shows "Unknown"), uptime (UptimeBar props), foot.
DeployPipeline: stages ({name, status: "done" | "running" | "signal" | "danger" | "idle", duration, action}).

ax41-fsn1Hetzner · 95.217.14.80Online
CPU34 %
RAM52 / 64 GB
DiskUnknown
Last deploy 2 h ago · #482
northwind.de
Last 90 days99.96 %
Budget€820 / €1,000
  1. Pull4 s
  2. Build1 m 12 s
  3. Approve—
  4. Release—

Props

DeployPipeline

PropTypeNotes
stages{ name: string; status?: "done" | "running" | "signal" | "danger" | "idle"; duration?: string; action?: ReactNode; }[]Required
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Meter

PropTypeNotes
label?ReactNode
valuenumber | nullRequired
max?number
text?ReactNode
warn?number
danger?number
tone?Tint
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

ServerCard

PropTypeNotes
namestringRequired
provider?string
address?string
logo?ReactNode
status?Status
statusLabel?string
meters?{ label: string; value: number | null; max?: number; text?: ReactNode; unknown?: string; }[]
uptime?UptimeBarProps
foot?ReactNode
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

UptimeBar

PropTypeNotes
daysUptimeDay[]Required
uptime?number
caption?ReactNode
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.