# Offline Banner

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.

> Primitive · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/offline-banner
```

## Import

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

## Variants

- `blocking` — Blocked payment: `npx @lumioui/cli add pro/offline-banner-blocking`

## Props

### OfflineBanner

| Prop | Type | Notes |
| --- | --- | --- |
| `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]. |
| `pending?` | `number` | Changes waiting to sync. Counts up while offline, down while syncing. Default 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". |
| `message?` | `string` | Headline while offline. Default "You're offline". |
| `blocking?` | `boolean` | Dim the screen behind and block touches while offline. Default false. |
| `glass?` | `boolean` | Glass island instead of the dark one — for screens over photos or video. Default false. |
| `className?` | `string` | — |

### OfflineContent

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `children?` | `React.ReactNode` | Each top-level child is a row: rows switch back on top to bottom, 40ms apart. |
| `className?` | `string` | — |

## Icons rendered

- `wifi-off` — /icons.html?i=wifi-off

Source: https://lumioui.com/components/offline-banner