Status Pages Kit
404, 500, 503, offline and 403: each one an interactive scene, all sharing one header and footer.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
404 · A torn page you can tape back together. status="404"
A starter kit for every error page. 404: drag the torn page back together. 500: flip the safety cover and hit RESET. 503: a crane lowers BACK SOON. Offline: plug the cable back in (it also listens for the browser's online event). 403: a vault guarded by lasers. Use the version switch to see each one.
Installation
$ npx shadcn@latest add https://guetix.com/r/status-pages.json
Uses the shadcn CLI. It creates components/guetix/status-pages.tsx and installs nothing else.
Usage
example.tsx
"use client";
import StatusPages, { type StatusKind } from "@/components/guetix/status-pages";
// The docs "version" switch picks the page: 404 · 500 · 503 · offline · 403.
export default function StatusPagesDemo({ variant = "404" }: { variant?: string }) {
return <StatusPages status={variant as StatusKind} brand="Northwind" homeHref="#" />;
}
app/not-found.tsxapp/error.tsxMaintenance modeOffline / PWAPermission walls
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01One shared Shell (header + main + footer), so each status is just a scene component, which makes it easy for an AI to extend.
- 02Every scene has a plain-text message and real links.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "404" | "500" | "503" | "offline" | "403" | "404" | Which page. |
| brand | string | — | Header brand. |
| homeHref | string | "/" | Home link. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Real headings and links on every page; the interactive scenes are optional extras.