shadcn.io is not affiliated with official shadcn/ui
GPU Utilization Dashboard Block for React
Four drawn racks of four GPU nodes with compute and memory bars and temperatures, a Hot only switch that dims the cool ones, and a side cell with the chosen node's workload, temperature and eight GPUs.
Installation
Overview
See which GPU nodes are running hot and what is on them, with this rack view for React with Base UI. A hairline frame with a plus mark on each corner holds four drawn cabinets, Racks A to D, each with four Glowrack nodes as slots. A slot shows the node's name, two thin bars for compute and memory and its temperature in degrees. A Switch in the header, "Hot only", dims every node under 80 °C and the header counts the rest. Pressing a node fills the side cell with the workload it runs, its temperature against a thin 80 °C tick and a bold 90 °C limit, and its eight GPUs as a grid of loads. It's built from Switch and Guides. For cluster schedulers and on-call dashboards.
FAQ
How do I fill it with my nodes?
Edit NODES: an id, a rack, a slot, compute and memory in percent, temp in degrees C and a workload line. RACKS lists the cabinets, and HOT and LIMIT set the two temperature marks. The counts, the hottest node and the header sentence are worked out from the list.
What does Hot only do?
It dims every node under the HOT temperature and leaves the hot ones at full strength; the status line says how many there are. Dimmed nodes can still be pressed, so you can compare a cool node with a hot one.
Where do the eight GPU loads come from?
Each node's GPUs are scattered around its compute figure by a seeded formula, so a node at 90% shows eight loads near 90 and the page looks the same on every visit. Replace gpusOf with your per-device readings.