shadcn.io is not affiliated with official shadcn/ui
CPU Usage Per Core Monitoring Block for React Aria
Eight cores over the last hour as strips of one-minute cells, a 70, 80 or 90 percent threshold that turns the busy cells solid, a range that scrubs one minute across all strips and a list of that minute's cores and busiest processes.
Installation
Overview
Find the core that never rests with this per-core CPU view for React with React Aria. It is Corestripe, a host monitor, and the header is worked out from the typed cells: "Core 3 has stayed at 90% or more for 38 minutes. One single-threaded process is pinned to it." In a hairline frame with a plus mark on each corner, each of eight cores is a strip of sixty one-minute cells shaded in three steps below the threshold and solid at or above it, so a pinned core is a solid bar among quiet ones. Three radios in the header set the threshold at 70, 80 or 90 percent. A native range scrubs a cursor across all eight strips at once; below, the reading band lists that minute's eight cores (a filled square marks the ones at or above the threshold) and its three busiest processes, and a side cell holds the load averages, context switches and threads. Guides draw the frame and its bands; the entrance is CSS only. For multi-core hosts where one saturated core hides behind a healthy average.
FAQ
How do I load my own cores?
GRID holds one number per core per minute, built from loadOf. Replace loadOf with your samples (eight rows of sixty percentages), keep AS_OF_MINUTES as the time of the last minute, and edit TASKS and useOf for the busiest-process list. The strips, the header sentence, the longest run per core and the reading band are all worked out from those numbers.
What does the threshold do?
It decides which cells are solid. Cells below it fall into three lighter steps by thirds of the threshold; cells at or above it are solid. The header names the core with the longest unbroken run at or above it and the status line repeats the result when you change it.
Is anything measured here?
No. The cells are a typed formula with fixed numbers, the processes are examples and nothing reads your machine; the foot says so. In your app feed the grid from your agent, for example per-core idle time from /proc/stat turned into a busy percentage.
How do I use it with a keyboard?
The threshold is a radio group (arrow keys move the choice). The minute is a native range: arrow keys step one minute, Page Up and Page Down jump ten, Home and End go to the ends, and its value text reads the time in UTC. The strips themselves are hidden from assistive technology and a caption gives each core's peak and longest run.