Service List

Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.

Services
  • APIOperational
    99.99%
  • IngestDegraded
    99.82%
  • BillingOperational
    99.97%
  • WorkersOperational
    99.95%

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

Import & use
import { Dashboard25 } from "@/components/beste/piece/dashboard25";

<Dashboard25
  heading="Services"
  upLabel="Operational"
  degradedLabel="Degraded"
  downLabel="Outage"
  services={[
    {
      "name": "API",
      "status": "up",
      "uptime": "99.99%"
    },
    {
      "name": "Ingest",
      "status": "degraded",
      "uptime": "99.82%"
    },
    {
      "name": "Billing",
      "status": "up",
      "uptime": "99.97%"
    },
    {
      "name": "Workers",
      "status": "up",
      "uptime": "99.95%"
    }
  ]}
/>