Uptime statusPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/uptime-status

• Markdown: https://ui.xzero.co.uk/components/blocks/uptime-status/markdown

• Access: Xzero Pro

• Registry id: uptime-status

• Source file: registry/blocks/uptime-status/uptime-status.tsx

• Built from: Badge, Button, Avatar, Animated counter

• Keywords: react status page, uptime monitor, service status page, uptime bars, incident timeline, 90 day uptime

Use this as a public or internal status page. Feed your incident history and monitor latency into uptime-data.ts; day bars, uptime percentages and chart scales are derived from them, and the incident button is a simulation.

When to use

• A public or internal status page with per-service uptime history.
• Pages that combine 90 day uptime strips, response time, and an incident timeline.

When not to use

• Use activity-heatmap for activity counts rather than availability.
• Use timeline for an incident history on its own.
• Use sparkline for a small latency trend inside a card.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/uptime-status

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { UptimeStatus } from "@/components/xzero/blocks/uptime-status/uptime-status";

export default function StatusPage() {
  return (
    <main>
      <UptimeStatus />
    </main>
  );
}

API reference

UptimeStatus

A status page with 90 day uptime strips per service, a response time chart and an incident timeline. Takes no props; services, days, latency and incidents are sample data in uptime-data.ts, and the incident button is a simulation.

No props.

Keyboard interactions

Keys	Action
Arrow left / Arrow right	Inspects the previous or next day on a service strip, or the previous or next half hour on the latency chart.
Page up / Page down	Jumps a week on a service strip.
Home / End	Jumps to the first or latest point.
Enter / Space	Selects the focused service so the latency chart follows it.
Escape	Clears the inspected day or point.

Accessibility

• Each strip is a focusable role="group" labelled with the service and described by its uptime summary.
• The latency chart has a text summary as its label, and polite live regions read out the inspected day or point.
• Incident headers are disclosure buttons with aria-expanded and aria-controls, and service rows use aria-pressed.

Motion

• The selected service highlight moves between rows with a shared layout spring, and the tooltip follows the pointer on a spring.
• The latency line morphs between services, and status text swaps with a short rise.
• Reduced motion removes the springs and moves the tooltip directly.

Responsive behavior

• Below an 860px container the response time chart and incidents stack into one column.
• Below 560px row details and uptime labels hide and the status button moves under the summary.
• Strips and the latency chart use touch-action pan-y, so touch scrubbing keeps vertical scroll.

Performance

• Each service draws 90 SVG bars; many services on one page means hundreds of rects, which is fine but not free.
• Chart widths follow ResizeObservers; there is no animation loop.

Notes for AI

• Use for a public or internal status page.
• Replace services, daily history, latency samples and incidents in uptime-data.ts; bars, percentages and scales derive from them.
• Remove or rewire the simulated incident trigger to your monitoring feed.

Related

• Activity heatmap: See a year of activity at a glance, one square per day.
• Badge: A small label for status, category, or metadata.
• Timeline: Follow what happened, newest first, grouped by day.
• Sparkline: Show a compact trend beside a value.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt