CPU Monitor
Per-core CPU load as live bars with sparklines, load averages, a pause button, and a stress test to watch it spike.
cpu-monitor.tsxcpu-monitor.css
Checking access…
Overview
Each core shows its current load and the last twenty samples. The header carries the overall average and 1, 5 and 15 minute load figures.
Pause freezes the readings for a closer look; Stress ramps every core towards full and lets it settle back. Sort puts the busiest cores first.
When to use
- Server dashboards, dev tools, system panels.
When not to use
- Machines with dozens of cores: aggregate instead.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/cpu-monitor.json$
npx shadcn@latest add https://sundaeui.dev/r/cpu-monitor.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/cpu-monitor.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/cpu-monitor.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy cpu-monitor.tsx and cpu-monitor.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CpuMonitor } from '@/components/sundae/cpu-monitor'
<CpuMonitor />Props
| Prop | Type | Default |
|---|---|---|
coresNumber of cores. | number | 8 |
intervalSample interval, ms. | number | 900 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each core is a meter with a numeric value.
- Controls are labelled toggles; samples are not announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-cpu; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is CPU Monitor free?
- CPU Monitor is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install CPU Monitor?
- Run npx shadcn@latest add https://sundaeui.dev/r/cpu-monitor.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does CPU Monitor support keyboard and screen readers?
- Each core is a meter with a numeric value. Controls are labelled toggles; samples are not announced.
- Does CPU Monitor respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Scrub Sparkline
Data · Refined Watchlist
Data · RefinedPulse KPI
Data · UnderstatedStacked Bars
Data · Refined- Pro
Tick Gauge
Data · Refined - Pro
Uptime Ticks
Data · Understated