Zum Inhalt springen
UI Kit
Accent

404 Seiten und Fehlerseiten

Nicht gefunden, Serverfehler, Wartung, bald verfügbar und offline. Jede Seite hilft weiter, statt Menschen stehen zu lassen.

5 Variants
Kategorie wechseln

Eine Sackgasse, die weiterführt

Auf einer Fehlerseite verlieren viele Websites ihre Besucher. Die fünf Varianten hier behalten den Rahmen deiner Website, sagen klar, was passiert ist, und bieten den nächsten sinnvollen Schritt, etwa Suche, Startseite oder einen Weg, das Problem zu melden.

„404 mit Suche“ ist die Seite für Adressen, die es nicht gibt, mit Suchfeld und den meistbesuchten Seiten. „500 mit Fehler-ID“ zeigt eine Kennung, die Besucher an den Support schicken. „Wartung“ sagt, wann die Seite zurück ist, „Bald verfügbar“ sammelt Adressen vor dem Launch, Offline erscheint, wenn in einer App die Verbindung abreißt.

Gib vom Server den richtigen Statuscode zurück, die Seite allein tut das nicht. Bleib ruhig im Ton und übernimm die Verantwortung, statt dem Besucher die Schuld zu geben. Verlinke die Startseite und zwei oder drei häufige Ziele, eine 404, die weiterführt, hält Menschen auf der Website.

Fehlerseiten

404 mit Suche

Ein Kompass statt der Null, ein Suchfeld und die meistbesuchten Seiten.

Im Studio öffnen

500 mit Fehler-ID

Ein Knopf zum erneuten Versuchen, eine kopierbare Fehler-ID für den Support, ein Link zur Statusseite und eine kleine Statustafel.

Im Studio öffnen

Wartung

Wann es zurück ist, wie weit es ist und was bisher passiert ist.

Im Studio öffnen

Bald verfügbar

Ein Countdown bis zum Start und ein Feld, um beim Start Bescheid zu bekommen.

Im Studio öffnen

Offline

Verfolgt die Verbindung live und macht aus dem neuen Versuch ein Neuladen, sobald sie zurück ist. Zeigt die Seiten, die weiter funktionieren.

Im Studio öffnen

Details

Was Fehlerseiten mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
5
Version
1.0.1 · seit 1.0.0
Datei
components/ui/error-page.tsx
Bringt mit
utilskitbuttonicon
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 31 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ErrorPageProps aus components/ui/error-page.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

  • titlePflicht
    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

Eingebaute Texte

Diese Texte schreibt Fehlerseiten selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 31 Texte anzeigen
searchEnglisch Search the siteDeutsch Website durchsuchen
searchPlaceholderEnglisch What were you looking for?Deutsch Wonach hast du gesucht?
searchButtonEnglisch SearchDeutsch Suchen
popularEnglisch Popular pagesDeutsch Beliebte Seiten
homeEnglisch Back to the homepageDeutsch Zur Startseite
retryEnglisch Try againDeutsch Erneut versuchen
retryingEnglisch TryingDeutsch Versuche
copyEnglisch Copy error IDDeutsch Fehler-ID kopieren
copiedEnglisch CopiedDeutsch Kopiert
errorIdEnglisch Error IDDeutsch Fehler-ID
timeEnglisch TimeDeutsch Zeit
pageEnglisch PageDeutsch Seite
statusEnglisch System statusDeutsch Systemstatus
etaEnglisch Expected backDeutsch Voraussichtlich zurück
progressEnglisch ProgressDeutsch Fortschritt
updatesEnglisch UpdatesDeutsch Neuigkeiten
emailEnglisch Email addressDeutsch E-Mail-Adresse
emailPlaceholderEnglisch you@example.comDeutsch du@beispiel.de
notifyEnglisch Notify meDeutsch Benachrichtigen
notifiedEnglisch Done. We will write to you on launch day, once.Deutsch Erledigt. Wir schreiben dir am Starttag, einmal.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
daysEnglisch DaysDeutsch Tage
hoursEnglisch HoursDeutsch Stunden
minutesEnglisch MinutesDeutsch Minuten
secondsEnglisch SecondsDeutsch Sekunden
onlineEnglisch Back onlineDeutsch Wieder online
reloadEnglisch Reload pageDeutsch Seite neu laden
offlineEnglisch No connectionDeutsch Keine Verbindung
stillOfflineEnglisch Still no connection. Check the tips below.Deutsch Weiterhin keine Verbindung. Schau dir die Tipps unten an.
tipsEnglisch Things to tryDeutsch Das kannst du versuchen
savedEnglisch Available offlineDeutsch Offline verfügbar

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-describedby, aria-invalid, aria-label, aria-live, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen progressbar, search und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 13 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Fehlerseiten?

Mit aiw add @ai-website/error-page. Der Befehl legt die Datei components/ui/error-page.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Fehlerseiten?

5 Varianten, 404 mit Suche, 500 mit Fehler-ID, Wartung, Bald verfügbar und Offline. Du wählst sie mit der Prop variant, zum Beispiel variant="server-error".

Kann ich die Texte von Fehlerseiten übersetzen?

Ja. Fehlerseiten bringt 31 eigene Texte auf Deutsch und Englisch mit, etwa „Website durchsuchen“, „Wonach hast du gesucht?“ und „Suchen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Fehlerseiten einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Fehlerseiten mit aiw_components und installieren sie mit aiw_add @ai-website/error-page. Nenn im Prompt die Variante, etwa variant="not-found", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Fehlerseiten ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden ErrorPage-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Error Pages stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert