Health Checks

Component 5

About

A list of endpoint health probes showing status, response latency, status code and a recent-latency sparkline, so a slow 200 OK reads as degraded instead of healthy.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Health Checks to your project and fits it to your theme.

Code

How Health Checks is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HealthChecks, type HealthCheck } from "@/components/ui/health-checks";

const CHECKS: HealthCheck[] = [
  {
    id: "1",
    name: "API",
    url: "https://api.astralyx.dev/health",
    status: "healthy",
    latency: 42,
    code: 200,
    history: [38, 41, 39, 44, 42, 40, 42],
  },
  {
    id: "2",
    name: "Checkout",
    url: "https://api.astralyx.dev/checkout/health",
    status: "healthy",
    latency: 1840,
    latencyThreshold: 800,
    code: 200,
    history: [220, 310, 480, 900, 1400, 1700, 1840],
  },
  {
    id: "3",
    name: "Registry",
    url: "https://registry.astralyx.dev/health",
    status: "down",
    code: 503,
    history: [64, 62, 88, 400, 0, 0, 0],
  },
  {
    id: "4",
    name: "Docs",
    url: "https://astralyx.dev",
    status: "healthy",
    latency: 88,
    code: 200,
    history: [92, 84, 88, 90, 86, 88, 88],
  },
];

export default function HealthChecksDemo() {
  return (
    <div className="w-full">
      <HealthChecks checks={CHECKS} />
    </div>
  );
}