Uptime Heartbeat

Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.

auth.beste.co99.92%

30d agoToday

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Monitoring4 } from "@/components/beste/piece/monitoring4";

<Monitoring4
  endpoint="auth.beste.co"
  history={[
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "slow",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "fail",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "slow",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok",
    "ok"
  ]}
  uptime="99.92%"
  pastLabel="30d ago"
  nowLabel="Today"
/>