@manggala31/react-status-page

Production-ready, self-hosted application health diagnostics and status page component for React, Laravel Inertia.js, and Next.js applications.

Table of Contents

• Overview
• Key Features
• Installation
• Quick Start
• Framework Integrations
  • Laravel Inertia.js (React)
  • Next.js (App Router)
  • Vite + React
• API Reference
  • StatusPage Component Props
  • ServiceHealth Interface
  • IncidentRecord Interface
  • UptimeDay Interface
• Styling & Custom Themes
• License

Overview

@manggala31/react-status-page is a modern, self-hosted status page UI framework designed to display operational health, service uptime, response latencies, and incident reports. It pairs directly with server-driven health checks (such as manggala/laravel-status-page or custom API monitoring endpoints).

Key Features

• Realtime Operational Status: Displays system-wide status badges (All Systems Operational, Degraded Performance, Partial Outage, Major Outage).
• Service Diagnostics Grid: Monitor individual system services (Database, Redis Cache, Storage, External APIs, Email Delivery).
• 90-Day Visual Uptime Bars: Render interactive daily status bars with tooltip uptime percentages and latencies.
• Incident Management Timeline: Display ongoing and historical incident reports, maintenance announcements, and resolution logs.
• Auto Refresh Callback: Support auto-refresh polling intervals for live monitoring dashboards.
• Zero Heavy Dependencies: Lightweight footprint, optimized for React 18, React 19, Next.js, and Inertia.js.

Installation

# Using npm
npm install @manggala31/react-status-page

# Using yarn
yarn add @manggala31/react-status-page

# Using pnpm
pnpm add @manggala31/react-status-page

# Using bun
bun add @manggala31/react-status-page

Quick Start

import React from 'react';
import { StatusPage, ServiceHealth, IncidentRecord } from '@manggala31/react-status-page';
import '@manggala31/react-status-page/styles.css';

const services: ServiceHealth[] = [
  {
    id: 'db',
    name: 'Primary Database',
    status: 'operational',
    latencyMs: 12,
    description: 'PostgreSQL database cluster',
  },
  {
    id: 'redis',
    name: 'Cache Engine',
    status: 'operational',
    latencyMs: 2,
    description: 'Redis in-memory cache layer',
  },
  {
    id: 'storage',
    name: 'Object Storage (S3)',
    status: 'degraded',
    latencyMs: 180,
    description: 'Cloud file storage service',
  },
  {
    id: 'mail',
    name: 'Email Delivery API',
    status: 'operational',
    latencyMs: 45,
    description: 'SMTP & transactional email provider',
  },
];

const incidents: IncidentRecord[] = [
  {
    id: 'inc-1',
    title: 'Elevated Storage Latency',
    status: 'investigating',
    severity: 'minor',
    createdAt: '2026-08-10 16:30:00',
    updatedAt: '2026-08-10 17:00:00',
    updates: [
      {
        timestamp: '2026-08-10 17:00:00',
        message: 'Engineers are monitoring object storage throughput.',
      },
      {
        timestamp: '2026-08-10 16:30:00',
        message: 'We are investigating reports of elevated response times.',
      },
    ],
  },
];

export default function StatusOverviewPage() {
  return (
    <div className="container">
      <StatusPage
        systemName="Acme Cloud Platform"
        services={services}
        incidents={incidents}
        showUptimeBars
        autoRefreshIntervalSeconds={60}
        onRefresh={() => console.log('Refreshing status checks...')}
      />
    </div>
  );
}

Framework Integrations

Laravel Inertia.js (React)

import React from 'react';
import { StatusPage, ServiceHealth, IncidentRecord } from '@manggala31/react-status-page';
import '@manggala31/react-status-page/styles.css';

interface Props {
  systemName: string;
  services: ServiceHealth[];
  incidents: IncidentRecord[];
}

export default function Diagnostics({ systemName, services, incidents }: Props) {
  return (
    <div className="p-6 max-w-5xl mx-auto">
      <StatusPage
        systemName={systemName}
        services={services}
        incidents={incidents}
        showUptimeBars
      />
    </div>
  );
}

API Reference

<StatusPage> Props

| Prop | Type | Default | Description | |---|---|---|---| | systemName | string | 'System Overview' | Title of the monitored application. | | services | ServiceHealth[] | Required | Array of service status definitions. | | incidents | IncidentRecord[] | [] | Array of active or historic incidents. | | showUptimeBars | boolean | true | Whether to display 90-day daily uptime history bars. | | autoRefreshIntervalSeconds | number | 0 | Auto-refresh interval in seconds (0 to disable). | | onRefresh | () => void | undefined | Callback invoked on manual or automatic refresh. | | className | string | '' | Custom CSS container class. |

ServiceHealth Interface

export interface ServiceHealth {
  id: string;
  name: string;
  status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'maintenance';
  latencyMs?: number;
  description?: string;
  uptimeHistory?: UptimeDay[];
}

IncidentRecord Interface

export interface IncidentRecord {
  id: string;
  title: string;
  status: 'investigating' | 'identified' | 'monitoring' | 'resolved';
  severity: 'minor' | 'major' | 'critical';
  createdAt: string;
  updatedAt: string;
  updates: Array<{
    timestamp: string;
    message: string;
  }>;
}

Styling & Custom Themes

Default colors are customizable via CSS variables:

:root {
  --status-page-bg: #ffffff;
  --status-page-border: #e2e8f0;
  --status-page-text: #0f172a;
  --status-page-muted: #64748b;
  --status-operational: #10b981;
  --status-degraded: #f59e0b;
  --status-outage: #ef4444;
  --status-maintenance: #3b82f6;
  --status-radius: 12px;
}

License

MIT License © Ilham Hatta Manggala