Utilization bar for CPU, memory, disk, or network with a recolorable fill and matching percentage label.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Monitoring2 } from "@/components/beste/piece/monitoring2";
<Monitoring2
resource="cpu"
value={72}
tone="emerald"
cpuLabel="CPU"
memoryLabel="Memory"
diskLabel="Disk"
networkLabel="Network"
/>Rate-limit row that maps remaining capacity to a chain of filled and hollow dots, with a count beside it.
Headline number for traffic volume with a trend arrow and tinted delta badge against a prior window.
Circular progress dial holding a percentage at its center, captioned with a label and supporting hint.
Vertical battery of segments rendering current queue fill against capacity, with a stacked numeric ratio beside it.
Two-line monospace block reporting read and write throughput with arrow glyphs for direction.
Single distribution bar splitting incident counts across critical, warning, and info segments with a mono legend.