Uptime Bar

Daily service health segments with uptime percentage, accessible labels and popover details.

@drift-ui/uptime-barRegistry JSONGitHubOpen in v0
API Service
99.86% uptime
90 days agoToday

Keyboard

←→
Move between segments
HomeEnd
First or last segment
Enter
Open the segment's details

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

uptime-bar-usage.tsx
import { UptimeBar } from "@/components/ui/uptime-bar"

const days = [
  { date: "2026-10-30", status: "operational" as const },
  { date: "2026-10-31", status: "degraded" as const, note: "Elevated API latency" },
]

export function ServiceHealth() {
  return <UptimeBar title="API" days={days} />
}

UptimeBar

Daily service health segments with uptime percentage, accessible labels and popover details. Keyboard navigation with Arrow keys, Home, and End.

Prop
daysRequired{ date: string | Date; status: UptimeStatus; uptime?: number; note?: string }[]Daily status records, oldest first. `status` is "operational", "degraded", "down" or "no-data". `uptime` is a 0 to 100 percentage that overrides the status score, and `note` shows in the popover.
titleReactNodeService name or header title.
showPercentagebooleanDefaulttrueWhether to render the calculated uptime percentage.
showRangeLabelsbooleanDefaulttrueWhether to render date range start and end labels.
startLabelReactNodeDefault`${days.length} days ago`Custom label for the start of the date range.
endLabelReactNodeDefault"Today"Custom label for the end of the date range.
degradedWeightnumberDefault0.5Weight given to degraded days when calculating uptime (0 to 1).
decimalsnumberDefault2Number of decimal places in the uptime percentage.
valuenumber | nullControlled open day popover index.
defaultValuenumber | nullDefaultnullInitial value when uncontrolled.
onValueChangenumber | nullCalled the open day popover index changes.
renderDayContent(day: UptimeDay, index: number) => ReactNodeCustom renderer for the popover content.

Other props go to the <div>.

UptimeBarLegend

Status legend showing dot indicators and labels for uptime states.

Prop
statusesUptimeStatus[]Default["operational", "degraded", "down", "no-data"]Status keys to display in the legend.

Other props go to the <div>.

Multi-service compact view

Stack multiple uptime bars with custom range labels to build service overview boards.

Web App
99.96% uptime
30 days agoToday
Database Cluster
99.96% uptime
30 days agoToday

Status legend

Pair UptimeBar with UptimeBarLegend to provide a clear key for operational, degraded, downtime, and no-data states.

Payment Gateway
97.78% uptime
Oct 25, 2026Oct 31, 2026
Operational
Degraded performance
Major outage
No data
components/ui/uptime-bar.tsx
CtrlK