PaceUI

  • Components
  • Blocks
  • Templates
  • Studio
  • Resources
Intro
  • Components
  • Installation
  • MCP
Agents
  • Chat Composer
  • Workflow Board
  • Thinking States
  • Audio Visualizer
  • Task Pipeline
  • Approval Card
  • Model Ability Selector
  • Model Selector
  • Response Writer
  • AI Suggestions
  • Token Counter
Crafts
  • All Crafts
  • Avatar Flight
  • Voice Record
  • Starfield Card
  • Destination Queue
  • Rolling Bento
  • Download Button
  • Cart Stepper
  • Heart Burst
  • Copy Bar
  • Generative Grid
  • Destination Card
  • Magnetic Button
  • Morphing Copy
  • Expanding Search
  • Metric Tracker
  • Tilt Card
  • Animated Stack
Charts
  • API Traffic
  • Weekly Traffic
  • Financial Performance
  • Channel Sales
  • Customer Growth
  • Customer Segments
  • Sales Overview
  • Traffic Distribution
  • Daily Orders
  • Acquisition Funnel
  • Weekly Attendance
  • Market Trends
  • Portfolio Overview
  • Instance Health
  • Resource Usage
  • SaaS Subscriptions
  • Database Performance
  • Model Usage
  • Spend Allocation
Motion
  • Accordion
  • Alert
  • Calendar
  • Checkbox
  • Collapsible
  • Combobox
  • Context Menu
  • Dropdown Menu
  • Empty
  • Hover Card
  • Input OTP
  • Menubar
  • Navigation Menu
  • Pagination
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Sidebar
  • Slider
  • Switch
  • Tabs
  • Tooltip
  • Reveal Text
  • Scramble Text
  • Squash Text
  • Bouncing Text
  • Mouse Wave Text
  • Text Fall Button
  • Spring Button
  • Infinite Scroller
  • Fillable Button
  • Layered Stack
  • Gradient Shadow
  • Profile Peek
  • Flip Reveal
  • Reveal on Scroll
  • Swap
  1. Components
  2. Charts
PreviousNext

Resource Usage

A high-density cluster resource load dashboard card displaying overall status, memory limits, and concentric usage rings.

When to use

  • High-density cluster resource monitoring displaying memory, CPU cores, disk I/O, and bandwidth.
  • Concentric usage rings showing nested capacity utilization across compute nodes.
  • Kubernetes cluster management and container orchestration consoles.

When not to use

  • Simple single-metric KPI displays; use a basic Progress bar component instead.
  • Sequential event streams or financial ledgers.

Props

PropTypeDefaultDescription
dataRecord<"hourly" | "daily" | "weekly", ResourceUsageItem[]>defaultOuterByRangeTime-range keyed resource usage breakdowns.
classNamestring—Optional custom CSS classes for the card container.

Data Structure

FieldTypeDescription
namestringHardware resource label (Memory (RAM), CPU Compute, etc.).
valuenumberQuantity of capacity currently consumed (0–100%).
changestringDelta change percentage string (e.g., 4.2%).
isPositivebooleanWhether the change indicator is considered positive.
limitnumberTotal provisioned hardware threshold.
fillstringCSS variable color token.
Instance HealthSaaS Subscriptions

PaceUI

Animated blocks, components, and templates for Next.js and TanStack Start. Built with Motion and shadcn - clean code you own.

GitHubTwitterDiscord

Products

BlocksComponentsTemplatesCraftsTanStack ChartsMCP ServerStarter KitsStyleX Components

Resources

DocumentationMotion ComponentsGSAP AnimationsNative AIBlogChangelog

Pricing & Account

PricingManage AccountLicensesAPI KeysAffiliate Program

Company

Contact UsDiscord CommunityPrivacy PolicyTerms of Service

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI

Database Resource Usage
0%Avg Load
Click a resource to drill down
Memory (RAM)
92%

↑4.2%

CPU Compute
84%

↑2.1%

Disk I/O
76%

↑1.5%

Connections
58%

↓5.4%

Active Locks
35%

↓12.0%