Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.
The import and the props worth knowing about, in one place.
import { Dashboard25 } from "@/components/beste/piece/dashboard25";
<Dashboard25
surface="card"
bordered={true}
inverted={false}
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%"
}
]}
/>Real-time counter with a pinging status dot in the tone color, a large monospace value, and a per-second rate.
Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.