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>
);
}