Staaarter

500 Incident Report

A server error page framed like an incident report: a small eyebrow and status code sit over a hairline rule, above a bold accent headline, a bordered table of incident details (reference, timestamp, service), and a retry button beside a status-page link.

By Staaarter Team
Error
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/500-incident-report.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error15.tsx instead.

Usage

The file also exports error15Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error15, error15Demo } from "@/components/blocks/error/error15";

export default function Page() {
  return <Error15 {...error15Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Error"Small label at the left of the hairline rule.
statusCodestring"500"Status code shown at the right of the hairline rule.
headingReactNodeSomething broke on <span className="text-primary">our</span> end.Bold headline. Accepts JSX so one word can be wrapped for the accent-color highlight.
descriptionstring"Our team has been notified and is already looking into it. Try again in a moment."Short supporting copy under the heading.
rowsIncidentRow[]noneLabeled rows in the bordered incident table.
retryLabelstring"Try again"Label for the retry button.
retryHrefstring"#"Link target for the retry button.
statusLabelstring"Status page"Label for the status-page link.
statusHrefstring"#"Link target for the status-page link.
classNamestringnoneExtra classes for the outer section element.

Types

interface IncidentRow {
  label: string;
  value: string;
}

Behavior notes

  • The retry button and status-page link render as real Next.js Link components, but both default to "#" until you supply your own hrefs, no retry request is actually sent.
  • The incident table's reference/timestamp/service values are static demo data, not a live report from a real monitoring system.