Circular progress dial holding a percentage at its center, captioned with a label and supporting hint.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring9 } from "@/components/beste/piece/monitoring9";
<Monitoring9
label="Cache hit"
value={87}
unit="%"
hint="last 1h"
tone="sky"
/>Compact service health row with operational state, pulsing dot, and uptime percentage on the right.
Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.
Semicircular gauge that renders a remaining-budget percentage along a single recolorable arc.
Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.
Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.
Inline edge between two named endpoints, drawn as a status-tinted stem with the round-trip latency floating mid-span.