Server Error With Live Status

Component

About

A calm 500 server-error page with an oversized heading, recovery action buttons, an image tile with a live uptime status indicator, and a hairline table of incident reference details.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Server Error With Live Status to your project and fits it to your theme.

Code

How Server Error With Live Status is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Error35 from "@/components/ui/error35";
import { Indicator14 } from "@/components/ui/error35-utils/indicator14";

export default function Error35Demo() {
  return (
    <Error35
      code="Error 500"
      heading="That one is ours, not yours"
      description="Something on our side failed while loading this page. Nothing you were working on has been lost, and the request has already been reported to the engineer on call."
      buttons={[
        { label: "Try again", href: "https://beste.co" },
        { label: "Back to the workspace", href: "https://beste.co" },
      ]}
      references={[
        { label: "Reference", value: "SIR-9F4C-2201" },
        { label: "Time", value: "14 May 2026, 09:41 UK" },
        { label: "Reported", value: "Automatically, no action needed" },
      ]}
      media={
        <Indicator14
          title="Booking service"
          uptime="99.98%"
          range="Last 45 days"
          bars={[
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "partial",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "down",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "partial",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
            "up",
          ]}
        />
      }
      image={{
        src: "https://cdn.21st.dev/assets/mirror/3c/3c0a90b5699b413143f49e61b33601d0d113cbbf56c927ccce83f05b0ed00689.jpg",
        alt: "Soft blue gradient backdrop",
      }}
      footnote="Quote the reference above if you write to us and we can pull the exact request out of the log."
    />
  );
}