Offline Banner

Pro

Connection banner that appears when you go offline, counts down to the next retry and shows waiting changes. Tap it to retry now, and it confirms with a check once you’re back.

Preview

Installation

npx @lumioui/cli add pro/offline-banner

Usage

import { OfflineBanner, OfflineContent } from "@/components/ui/offline-banner/offline-banner";
<OfflineBanner />

Also exported: OfflineContent.

Examples

Blocked payment

A transfer can't be queued, so while the signal is down the screen behind dims slightly and stops taking taps; only the island stays lit.

API reference

OfflineBanner

Prop Type Default
offline* boolean

The connection is down.

 —
onRetry () => void | Promise<unknown>

Re-check connectivity. Return a promise to keep "Retrying" up until it settles.

 —
retryDelays number[]

Seconds between automatic retries; the last one repeats. Default [5, 10, 20, 30].

 DEFAULT_DELAYS
pending number

Changes waiting to sync. Counts up while offline, down while syncing. Default 0.

 0
syncedCount number

Override the "N synced" figure shown on reconnect. Defaults to the most changes that were waiting.

 —
syncStatus SyncStatus

Post-reconnect sync state, for hosts that don't count pending down. "syncing" holds the syncing island; "synced" resolves it. Default "idle".

 "idle"
message string

Headline while offline. Default "You're offline".

 "You're offline"
blocking boolean

Dim the screen behind and block touches while offline. Default false.

 false
glass boolean

Glass island instead of the dark one — for screens over photos or video. Default false.

 false
className string —

OfflineContent

Prop Type Default
offline* boolean

The connection is down.

 —
blocked boolean

Dim and block this content while offline — only for actions that can't queue. Default false: queued edits keep the screen bright.

 false
children React.ReactNode

Each top-level child is a row: rows switch back on top to bottom, 40ms apart.

 —
className string —