184 Components
Server Metrics Sparkboard
CardsGrafana and Railway inspired multi-sparkline telemetry dashboard monitoring CPU, Memory, Disk I/O, and Network Egress with synchronized crosshair cursor inspection across all graphs simultaneously.
edge-compute-node-42.iad1
HEALTHYAWS us-east-1 (N. Virginia)
CPU Utilization
34.2%
Memory (RAM)
61.8%
Disk I/O Write
18.4MB/s
Network Egress
2.4GB/s
Telemetry: 10s sampling resolutionLive Real-Time
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/server-metrics-sparkboard.json"
Props
TypeScript props supported by <ServerMetricsSparkboard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| hostName | string | "edge-compute-node-42.iad1" | Host server name or DNS identifier. |
| region | string | "AWS us-east-1 (N. Virginia)" | Cloud region or datacenter location. |
Key Features
- 4 synchronized sparkline graphs for CPU, Memory, Disk, and Network.
- Global crosshair scrub cursor updating values across all charts simultaneously.
- Interactive time range selectors (1h, 6h, 24h, 7d).
- Real-time server host and cloud region telemetry headers.
Keyboard & Accessibility
- High-contrast color-coded metric series.
- Accessible numeric labels with proper units.