A shadcn registry
Build any gauge you can imagine
Composable SVG gauge components for React, ready to integrate into your projects.
Install
1
Add it with the shadcn CLI
$ npx shadcn@latest add https://gauge-ui.dev/r/gauge.json2
Build your gauge
Using the primitives in @/components/gauge, build a monochrome speedometer from 0 to 240 km/h with a single red zone at the top end, a pointer needle and tick labels every 40.
Examples
Load average3.10
2.80 · 2.40
CPU temp57 °C
Throttles at 95 °C
Fan2,490
rpm, max 5,000
Swap1.1 GB
of 8 GB
CPU
8 cores, up 42 days
41% busy
- User
- 30%
- System
- 12%
- Idle
- 59%
Memory
32 GB, 8 GB swap
69%
- Wired
- 3.4 GB
- App
- 12.6 GB
- Cached
- 6.2 GB
- Free
- 9.8 GB
- Swap
- 1.1 GB
Network
eth0, 1 Gb/s
50% of link
- Download
- 412 Mb/s
- Upload
- 88 Mb/s
- Connections
- 1,284
- Dropped
- 0
Disks
Mounted volumes
R 142 · W 38 MB/s
/328 / 512 GB
/var/log116 / 128 GB
/data963 / 2048 GB
Processes
Top by CPU
312 running
| Name | PID | CPU | Mem |
|---|---|---|---|
| postgres | 1182 | 84.0% | 18.2% |
| node | 2417 | 61.0% | 9.4% |
| nginx | 904 | 22.0% | 0.6% |
| redis-server | 1320 | 17.0% | 4.1% |
| dockerd | 611 | 9.0% | 2.3% |
| prometheus | 1755 | 6.0% | 3.8% |