Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

GPU Utilization Monitoring Block for Svelte

One accelerator over the last 60 seconds: video memory as a stacked bar by process, compute and memory lines with their limits and one shared cursor, a power bar and a table of processes.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See who holds the memory on a GPU, with this utilization panel for Svelte with Ark UI. It is Vramlight, an accelerator memory monitor (made up), watching one device for 60 seconds. The first band is the 40 GB of video memory as one stacked bar by process: training job, eval job, notebook, exporter and free, told apart by weight. Under it two small lines, compute use and memory use, each with its limit drawn as a line, share one cursor: a native range named Second that reads both values at that second. Power is a thin bar, "245 W of 400 W", and a native table lists the processes with pid, memory and compute share. The header sentence is worked out from the typed processes. Guides draw the frame and its bands; the entrance is CSS only. For ML platform teams, training dashboards and shared GPU hosts.

FAQ

How do I use my own device data?

Edit PROCS (each process has its memory in gigabytes and its compute share) and TOTAL_GB. The two 60-second series are built at the top of the file from small noise helpers and end on the numbers worked out from PROCS; replace COMPUTE and VRAM with your own arrays of 60 values. The memory percentage, the free amount and the header sentence are derived.

How does the cursor work?

It is a native range under the lines, named Second, whose value text is the second and both readings. Arrow keys move it one second, Home and End jump, and dragging scrubs it. It starts on the dip in compute use so the first screen shows the story. The line under the slider updates at once; a polite status line speaks it about 600 ms after the last change.

What are the two limit lines?

The compute line has a typed line at 90% ("Busy above 90%") and the memory line has the 40 GB installed, so a reader sees how close each is to its ceiling. They are data, not controls.

What is real here and what is typed?

All of it is typed: no device is queried, and the product and process names are made up. Nothing here kills a process or changes a limit.

Can I read it without colour?

Yes. The stacked bar uses five weights of the foreground colour, the table repeats every process with its swatch, and the lines are told apart by their axes and labels. The table is the stacked bar's text equivalent.

How does it look on a phone?

The stacked bar comes first, the two lines stack one under the other, and the table drops its pid column.

All 100 monitoring blocks