Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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%"
}
]}
/>Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Channel-level unread inbox with email, Slack, and push rows, each showing a tinted icon tile and a rose count badge.
| Account | Plan | Amount |
|---|---|---|
| Atlas Labs | Scale | $820 |
| Northwind | Pro | $420 |
| Hemlock | Pro | $420 |
| Stoic & Co. | Starter | $120 |
Three-column data table with a sort arrow on the active column and monospaced right-aligned amounts in each row.