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%

New here? Read the installation guide.

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%"
    }
  ]}
/>

More Dashboard pieces

View all Dashboard
Live requests
2,418+24 / sec

Live Counter

Real-time counter with a pinging status dot in the tone color, a large monospace value, and a per-second rate.

api.prod.example99.94%
60 days agoToday

Uptime Status

Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

System health
82
Healthy

Health Gauge

Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.

Signups382
+12%
Revenue$18.4K
+6%
MAU9.8K
+3%

Sparkline Row

Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.

2Critical
6Warning
14Info

Alert Summary

Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.

Markdown version