ResourceUsageBar

resourceusagebar-1779388705929.tsx

'use client';
import { useState, useEffect } from 'react';

export default function ResourceUsageBar() {
  const [resources, setResources] = useState([
    { name: 'CPU', value: 42, color: '#6366f1' },
    { name: 'Memory', value: 71, color: '#C9A84C' },
    { name: 'Storage', value: 58, color: '#4ade80' },
    { name: 'Bandwidth', value: 23, color: '#22d3ee' },
    { name: 'GPU', value: 89, color: '#ef4444' },
  ]);

  useEffect(() => {
    const t = setInterval(() => {
      setResources(r => r.map(res => ({
        ...res,
        value: Math.max(5, Math.min(99, res.value + (Math.random() - 0.5) * 8)),
      })));
    }, 2000);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', width: '300px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '14px', fontWeight: 700 }}>System Resources</h3>
        <span style={{ color: '#4ade80', fontSize: '12px', fontWeight: 600 }}>● Live</span>
      </div>
      {resources.map((r, i) => (
        <div key={i} style={{ marginBottom: '14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
            <span style={{ color: 'rgba(245,245,240,0.7)', fontSize: '13px' }}>{r.name}</span>
            <span style={{
              color: r.value > 80 ? '#ef4444' : r.value > 60 ? '#C9A84C' : '#4ade80',
              fontSize: '13px', fontWeight: 700,
              transition: 'color 0.5s ease',
            }}>{Math.round(r.value)}%</span>
          </div>
          <div style={{ height: '6px', background: 'rgba(255,255,255,0.06)', borderRadius: '3px', overflow: 'hidden' }}>
            <div style={{
              height: '100%',
              width: `${r.value}%`,
              background: r.value > 80
                ? 'linear-gradient(90deg, #ef4444, #f87171)'
                : `linear-gradient(90deg, ${r.color}, ${r.color}cc)`,
              borderRadius: '3px',
              transition: 'width 1.5s cubic-bezier(0.4,0,0.2,1)',
              boxShadow: `0 0 8px ${r.color}60`,
            }} />
          </div>
        </div>
      ))}
    </div>
  );
}

Component info

CategorySaas Dashboard

Frameworkreact

TierFREE

Copies0

About

System resource usage bars with animated fills

More from Saas Dashboard

'use client';
import { useState } from 'react';

export default function PricingToggleCard() {
  const [annual, setAnnual] = useState(false);
  const monthly = 49;
  const price = annual ? Math.round(monthly * 0.75) : monthly;

  const features = ['U

PricingToggleCard

Saas Dashboard

'use client';
import { useState } from 'react';

export default function UsageQuota() {
  const quotas = [
    { name: 'API Calls', used: 87420, limit: 100000, unit: 'calls' },
    { name: 'Storage', used: 47.3, limit: 50, unit: 'GB' },
    { name: '

UsageQuota

Saas Dashboard

'use client';
import { useState, useEffect } from 'react';

export default function SaaSMetricsDashboard() {
  const [metrics, setMetrics] = useState({
    mrr: 48293, mrrChange: 12.4,
    churn: 1.8, churnChange: -0.3,
    nps: 72, npsChange: 5,

SaaSMetricsDashboard

Saas Dashboard