Components
Maintenance screen
The screen of a service down on purpose: what is happening, when to come back, one button to check again.
import { MaintenanceScreen } from "@krizaka/ui/maintenance-screen";Web and mobile — the same component for React and React Native. Deprecated: kept for the apps that still use it, removed in its next major.
Why it is here. The web entry has no user (ADR-006 audit, 2026-10-25). The native `MaintenanceScreen`, used by mobile apps, stays.
DeprecatedSince 3.55.0, removed in 4.0.0. The web entry has no user (ADR-006 audit, 2026-10-25). The native `MaintenanceScreen`, used by mobile apps, stays.
When to use
- When the backend's parameters say maintenance is on.
- In place of the app, for the minutes the service is down.
When not to use
- When something broke unexpectedly.Use instead: Error page
- When the installed version is too old.Use instead: Force update screen
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { MaintenanceScreen } from "@krizaka/ui/maintenance-screen";Examples
Default
The title, the operator's message and “Try again”.
Props
The maintenance screen: announced politely, with one way to check again.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The headline (“Back in a few minutes”). |
mark | ReactNode | — | The product's mark or mascot (decorative). |
message | ReactNode | — | What is happening — the backend's localized maintenance message. |
onRetry | (() => void) | — | Checks the backend again. |
retryLabel | string | — | The button that checks again (“Try again”). |
Accessibility
- The title and message are a polite
status; the mark is decorative.
Best practices
- Say what is happening and, if you know, when to come back.
- Keep “Try again”: the person decides when to check.
- Take the text from the backend's
maintenance.messageso the operator can write it.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub