404 pages and error pages

Not found, server error, maintenance, coming soon and offline. Each one helps people on instead of leaving them stuck.

5 variants

Switch category

A dead end that leads somewhere

An error page is a moment where many sites lose the visitor. The five variants here keep the frame of your site, say plainly what happened and offer the next useful step, such as search, the start page or a way to report the problem.

404 with search is the page for addresses that do not exist, with a search field and the most visited pages. 500 with error ID shows a reference the visitor can send to support. Maintenance says when the site is back, Coming soon collects addresses before a launch, Offline appears when the connection drops in an app.

Return the right status code from your server, the page alone does not do that. Keep the tone calm and take responsibility instead of blaming the visitor. Link the start page and two or three common destinations, a 404 that leads on keeps people on the site.

404 with search

A compass in place of the zero, a search field and the most visited pages.

Open in Studio

Installv1.0.1

aiw add @ai-website/error-page

Brings along utils, kit, button, icon

Usage

<ErrorPage variant="not-found" title="…" searchAction="/search" links={[{ label, href, description, icon }]} />

Source

500 with error ID

A retry button, a copyable error ID for support, a link to the status page and a small status board.

Open in Studio

Installv1.0.1

aiw add @ai-website/error-page

Brings along utils, kit, button, icon

Usage

<ErrorPage variant="server-error" title="…" errorId="…" timestamp="…" statusHref="/status" />

Source

Maintenance

When it will be back, how far along it is and what happened so far.

Open in Studio

Installv1.0.1

aiw add @ai-website/error-page

Brings along utils, kit, button, icon

Usage

<ErrorPage variant="maintenance" eta="14:00 CET" progress={65} updates={[{ time, text, done }]} />

Source

Coming soon

A countdown to the launch and one field to be told when it opens.

Open in Studio

Installv1.0.1

aiw add @ai-website/error-page

Brings along utils, kit, button, icon

Usage

<ErrorPage variant="coming-soon" title="…" launchDate="2026-12-01T09:00:00Z" onNotify={(email) => …} />

Source

Offline

Follows the connection live and turns the retry into a reload once it is back. Lists the pages that still work.

Open in Studio

Installv1.0.1

aiw add @ai-website/error-page

Brings along utils, kit, button, icon

Usage

<ErrorPage variant="offline" title="…" tips={[…]} links={[…savedPages]} />

Source

Details

What Error pages brings along, read from the registry and the source.

Area: Content
Variants: 5
Version: 1.0.1 · since 1.0.0
File: components/ui/error-page.tsx
Brings along: utilskitbutton icon
npm packages: None
Languages: English and German, 31 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ErrorPageProps interface from components/ui/error-page.tsx, with the comments from the code.

variantoptional
ErrorPageVariant
not-foundserver-errormaintenancecoming-soonoffline
brandoptional
React.ReactNode
Your logo or name at the top of the page
codeoptional
string
Status code or a short label, e.g. 404
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
primaryActionoptional
{ label: string; href: string }
secondaryActionoptional
{ label: string; href: string }
linksoptional
ErrorPageLink[]
Popular pages (not-found) or pages that work offline (offline)
searchActionoptional
string
Where the search form sends the query as ?q= (not-found)
errorIdoptional
string
server-error
timestampoptional
string
pathoptional
string
statusHrefoptional
string
etaoptional
string
maintenance
progressoptional
number
0 to 100
updatesoptional
ErrorPageUpdate[]
launchDateoptional
string
coming-soon: ISO date and time, e.g. 2026-12-01T09:00:00Z
waitingoptional
React.ReactNode
onNotifyoptional
(email: string) => void | Promise<void>
tipsoptional
string[]
offline

Built-in texts

Error pages writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 31 texts

Key	English	German
search	English Search the site	German Website durchsuchen
searchPlaceholder	English What were you looking for?	German Wonach hast du gesucht?
searchButton	English Search	German Suchen
popular	English Popular pages	German Beliebte Seiten
home	English Back to the homepage	German Zur Startseite
retry	English Try again	German Erneut versuchen
retrying	English Trying	German Versuche
copy	English Copy error ID	German Fehler-ID kopieren
copied	English Copied	German Kopiert
errorId	English Error ID	German Fehler-ID
time	English Time	German Zeit
page	English Page	German Seite
status	English System status	German Systemstatus
eta	English Expected back	German Voraussichtlich zurück
progress	English Progress	German Fortschritt
updates	English Updates	German Neuigkeiten
email	English Email address	German E-Mail-Adresse
emailPlaceholder	English you@example.com	German du@beispiel.de
notify	English Notify me	German Benachrichtigen
notified	English Done. We will write to you on launch day, once.	German Erledigt. Wir schreiben dir am Starttag, einmal.
invalidEmail	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
days	English Days	German Tage
hours	English Hours	German Stunden
minutes	English Minutes	German Minuten
seconds	English Seconds	German Sekunden
online	English Back online	German Wieder online
reload	English Reload page	German Seite neu laden
offline	English No connection	German Keine Verbindung
stillOffline	English Still no connection. Check the tips below.	German Weiterhin keine Verbindung. Schau dir die Tipps unten an.
tips	English Things to try	German Das kannst du versuchen
saved	English Available offline	German Offline verfügbar

Read from the source of the component.

Sets aria-describedby, aria-invalid, aria-label, aria-live, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles progressbar, search and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 13 places in the code switch motion off then.

Frequent questions

How do I install Error pages?

With aiw add @ai-website/error-page. The command puts components/ui/error-page.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Error pages have?

5 variants, 404 with search, 500 with error ID, Maintenance, Coming soon and Offline. You pick one with the variant prop, for example variant="server-error".

Can I translate the texts of Error pages?

Yes. Error pages carries 31 texts of its own in English and German, such as “Search the site”, “What were you looking for?” and “Search”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Error pages?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Error pages with aiw_components and install it with aiw_add @ai-website/error-page. Name the variant in your prompt, for example variant="not-found", and the assistant writes your content straight into the props.

Can I adjust Error pages without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching ErrorPage code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Error pages on a page.

A dead end that leads somewhere

Error pages

404 with search

500 with error ID

Maintenance

Coming soon

Offline

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with