Components
Force update screen
The blocking screen of a version that can no longer run: the mark, one sentence, one button to the store.
import { ForceUpdateScreen } from "@krizaka/ui/force-update-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 `ForceUpdateScreen`, 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 `ForceUpdateScreen`, used by mobile apps, stays.
When to use
- When the backend says
updateMode: forceor answers426 Upgrade Required. - In place of the whole app: nothing behind it must be reachable.
When not to use
- When the installed version still works: invite, do not block.Use instead: Update prompt
- When the service is down on purpose.Use instead: Maintenance screen
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ForceUpdateScreen } from "@krizaka/ui/force-update-screen";Examples
Default
The title, the sentence, the versions and the store button.
Props
The forced update: one thing to do, and the way to do it.
| Prop | Type | Default | Description |
|---|---|---|---|
onUpdaterequired | () => void | — | Opens the store page. |
titlerequired | ReactNode | — | The headline (“Update to keep going”). |
updateLabelrequired | string | — | The button that updates (“Update the app”). |
mark | ReactNode | — | The product's mark or mascot (decorative). |
message | ReactNode | — | Why, in a sentence — the backend's localized message. |
onRetry | (() => void) | — | Checks the backend again. |
retryLabel | string | — | A secondary way (“Check again”) once the update is installed — optional. |
versionLabel | ReactNode | — | The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). |
Accessibility
- A
mainwith the title as itsh1; the update button takes focus at once. - The mark is decorative.
Best practices
- Say why in one sentence and give one way out: the store button.
- Show the installed and the required version, in mono.
- Offer “Check again” for the person who just updated from the store.
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