Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

CPU Utilization Dashboard Block for React

Seven services as bullet rows on a 0-4 core scale, p95 usage against request and limit, with a headroom slider that recommends new requests and an Apply button that moves every tick.

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

Right-size your CPU requests from what the services really use, with this utilization panel for React with Base UI. A hairline frame with a plus mark on each corner holds seven Loadstar services as bullet rows on one scale from 0 to 4 cores: a bar for the p95 usage of the last seven days, a solid tick for the request, a grey track out to the limit and a hollow diamond where the recommended request would sit. A service whose p95 is within 10% of its limit reads "Throttled". A Slider sets the headroom from 10 to 50%, and the header says how many services to resize and how many cores that frees. A Shine Button applies the recommendations to the page. It's built from Slider, Badge, Button, Shine Button and Guides. For platform teams and cost reviews.

FAQ

How do I fill it with my services?

Edit SERVICES: an id, a name, and p95, request and limit in millicores. SCALE is the right edge of the bars, and THROTTLE_AT is the share of the limit that counts as throttled. Everything else, the recommendations, the count and the cores freed, is worked out from those numbers.

How is a recommended request worked out?

It is the p95 usage times one plus the headroom, rounded up to 0.1 core and never above the limit. At 25% headroom a service using 1.1 cores gets 1.4. A service already at its recommendation reads "On target", and the header counts only the others.

What does Apply recommendations do?

It moves every request tick to the recommendation for the headroom you had chosen and says how many requests changed. Reset puts the typed requests back. Moving the slider afterwards shows the new recommendations against the applied requests, so you can see what another round would change.

What stays local, and how do I wire it for real?

Everything: the usage numbers are typed and Apply changes only this page. To make it real, read p95 from your metrics store, write the new requests to your deployments from the click handler, and keep the headroom in the service's own policy.

How does it look on a phone?

Each service becomes three lines: its name with the p95, the request and recommendation, and the bullet at full width. The scale labels drop out, and the Apply button sits in a foot that stays pinned to the bottom.

All 200 dashboard blocks