Staaarter

Server Error With Live Status

A calm server-error page: a monospace error code, an oversized light headline, recovery action buttons, and a hairline table carrying an incident reference and timestamp on the left, beside an image tile floating a decorative pulsing status dot and a row of static uptime bars on the right.

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, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/server-error-with-live-status.json

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

Usage

The file also exports error35Demo, 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 { Error35, error35Demo } from "@/components/blocks/error/error35";

export default function Page() {
  return <Error35 {...error35Demo} />;
}

Props

PropTypeDefaultDescription
errorCodestring"ERROR 500 · INTERNAL_SERVER_ERROR"Monospace error code shown above the headline.
headingstring"Something went wrong on our end"Oversized light headline.
descriptionstringnoneShort supporting copy under the headline.
primaryLabelstring"Refresh page"Label for the primary recovery button.
primaryHrefstring"#"Link target for the primary recovery button.
secondaryLabelstring"Contact support"Label for the secondary recovery button.
secondaryHrefstring"/support"Link target for the secondary recovery button.
imageMediaSlotImagenoneBackground image for the floating status tile.
statusLabelstring"Investigating"Label next to the pulsing status dot.
uptimeBarsnumber[]noneFixed heights (0-100) rendered as a static row of uptime bars, purely decorative.
referencestring"ERR-2F91-6D3A"Incident reference shown in the hairline table.
timestring"Aug 2, 2026 · 14:32 UTC"Timestamp shown in the hairline table.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The uptime strip (the pulsing status dot plus the row of small bars) is a purely static, decorative visual, not a real live status feed: the dot's pulse is CSS-only (animate-ping/animate-pulse) and the bars render from a fixed `uptimeBars` array with no polling, websocket, or interval behind them. Do not wire this up as a real status page without adding actual data fetching.
  • Every button and link, including the Reference/Time table, is static demo content; nothing is fetched from a real incident-tracking system.