SaaSMetricsDashboard

saasmetricsdashboard-1779388706205.tsx

'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,
    arpu: 127, arpuChange: 3.2,
  });

  const cards = [
    { key: 'mrr', label: 'MRR', format: v => '$' + Math.round(v).toLocaleString(), changeKey: 'mrrChange', good: true },
    { key: 'churn', label: 'Churn Rate', format: v => v.toFixed(1) + '%', changeKey: 'churnChange', good: false },
    { key: 'nps', label: 'NPS Score', format: v => Math.round(v).toString(), changeKey: 'npsChange', good: true },
    { key: 'arpu', label: 'ARPU', format: v => '$' + Math.round(v), changeKey: 'arpuChange', good: true },
  ];

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '520px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>SaaS Metrics</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: 'rgba(245,245,240,0.4)', fontSize: '12px' }}>
          <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#4ade80', display: 'inline-block' }} />
          Live · May 2026
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
        {cards.map(card => {
          const value = metrics[card.key];
          const change = metrics[card.changeKey];
          const positive = card.good ? change > 0 : change < 0;
          const color = positive ? '#4ade80' : '#ef4444';
          return (
            <div key={card.key} style={{
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.07)',
              borderRadius: '14px', padding: '18px 20px',
            }}>
              <p style={{ color: 'rgba(245,245,240,0.5)', fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 10px 0' }}>{card.label}</p>
              <p style={{ color: '#F5F5F0', fontSize: '26px', fontWeight: 900, margin: '0 0 8px 0', letterSpacing: '-0.02em' }}>{card.format(value)}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                <span style={{ color, fontSize: '13px', fontWeight: 700 }}>
                  {change > 0 ? '+' : ''}{typeof change === 'number' ? change.toFixed(1) : change}{card.key === 'churn' ? 'pp' : '%'}
                </span>
                <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '11px' }}>vs last month</span>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: '16px', padding: '16px 20px', background: 'rgba(201,168,76,0.04)', border: '1px solid rgba(201,168,76,0.15)', borderRadius: '14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <p style={{ margin: 0, color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>Annual Run Rate</p>
          <p style={{ margin: '4px 0 0 0', color: '#C9A84C', fontSize: '22px', fontWeight: 900 }}>${(metrics.mrr * 12).toLocaleString()}</p>
        </div>
        <div style={{ textAlign: 'right' }}>
          <p style={{ margin: 0, color: 'rgba(245,245,240,0.5)', fontSize: '12px' }}>Active Subscribers</p>
          <p style={{ margin: '4px 0 0 0', color: '#F5F5F0', fontSize: '22px', fontWeight: 900 }}>{Math.round(metrics.mrr / metrics.arpu).toLocaleString()}</p>
        </div>
      </div>
    </div>
  );
}

Component info

CategorySaas Dashboard

Frameworkreact

TierFREE

Copies0

About

Mini SaaS metrics dashboard with MRR, churn, NPS

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, useEffect } from 'react';

export default function ResourceUsageBar() {
  const [resources, setResources] = useState([
    { name: 'CPU', value: 42, color: '#6366f1' },
    { name: 'Memory', value: 71, color: '#C9A84C

ResourceUsageBar

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