404 Page
Drops straight into app/not-found.tsx, and keeps the site header and footer — on a 404 the navigation is the most useful thing on screen.
System Pages1 blocks62 lines
Scheduled Maintenance
Planned downtime with an actual end time on it — "back soon" is not a time, and a maintenance page without one looks like an outage nobody has noticed.
2 blocks35 lineslucide-reactAdded 9 Sept 2026
What's included
app/maintenance-page.tsx- 2 blocks it is built from, installed with it
- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add maintenance-page
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Preview
Scheduled maintenance in progress
We are migrating the primary database. Dashboards, the CLI and sign-in are unavailable until this finishes.
Expected back in
02:14:09
About 2 hours and 14 minutes remaining. Estimated finish at
Still working
- Published sites stay online and serving
- The public API continues to read from cache
- Existing sessions are not signed out
Hosted separately, so it stays up when this does not.
The real page, rendered in your current theme — every section below is a live block, not a screenshot.
Built from
All blocks- Scheduled Maintenance WindowPlanned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.Empty & Error States
- App Footer with StatusThe footer of a signed-in product rather than a marketing site: a live status line with words as well as colour, plus locale and theme as native selects.Footers
Only want one section? Open it and copy that block instead — browse Empty & Error States.
Shipped in these templates
Want the whole project rather than this one screen? A template ships every route, the theme tokens and the layout.
Source
app/maintenance-page.tsx
/**
* Planned downtime, which is the one outage that can be written in advance.
*
* The difference between this and the 500 page is knowledge: here we know
* what is happening and roughly when it ends, and the entire job of the
* page is to transfer those two facts. A visitor who leaves knowing the
* end time does not open a ticket.
*
* The obvious wrong answer is "we'll be back soon". Soon is not a time,
* and a maintenance page without one is indistinguishable from an outage
* nobody has noticed.
*
* The status footer is under it because the second question — after "when"
* — is "is this everything or just the part I use", and a locale and
* status row answers that without a second page.
*/
import * as React from 'react'
import { MaintenanceWindowState } from '@/components/maintenance-window-state'
import { FooterStatusLocale } from '@/components/footer-status-locale'
export default function MaintenancePage() {
return (
<main className="flex min-h-screen flex-col bg-background text-foreground">
<div className="flex-1">
<MaintenanceWindowState />
</div>
{/* Pushed to the bottom by the flex column above, so a short page
does not leave the status row floating mid-screen. */}
<FooterStatusLocale />
</main>
)
}
How to use it
- 1. Copy each of the 2 blocks above into
components/— each block page has its own copy button. - 2. Drop this file at
app/maintenance-page.tsx. The imports already point at@/components/…, so they resolve with no edits. - 3. Delete the sections you do not want. Every block takes props, so the copy changes without the layout moving.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
More System Pages
Server Error
Retry first, because a 500 is our failure and offering navigation implies the rest of the site works — which is exactly what is in doubt.
System Pages2 blocks44 lines
Permission Denied
A 403 that names who can grant what was refused, because the next question is always "then who can" and a support link is the wrong answer to it.
System Pages2 blocks42 lines
Status Page
Written for the person refreshing it during an outage: current state above the fold, the maintenance window as a real block with an end time, and a component list that names what still works.
System Pages6 blocks155 lines
Legal Document
Terms, privacy, DPA and cookies in one frame — the docs layout, because people arrive at a legal page looking for a specific clause and a wall of text makes that a Ctrl-F expedition.
System Pages3 blocks50 lines
Status Page 02
The status page read during diligence rather than during an outage: ninety days of uptime, the latency curve, and every incident carrying its post-mortem — including the bad one.
System Pages7 blocks237 lines
Legal Document 02
One document with a plain-language column beside each clause, for the reader who cannot name the clause they need — and the cookie control inline, because a banner is unreachable the moment it has been dismissed.
System Pages6 blocks200 lines