KQ-540 · OFFLINE/BAR

Offline Bar

A connection banner that keeps its own time. Going offline drops the bar in from distances.shift on glide in warn, with a ring counting the seconds down to the next check and a Retry now that runs it immediately; when the connection returns the bar turns success, says so, and lifts away on the exit ease after a beat, because a reconnection is a relief rather than a celebration. It follows the browser's online and offline events through useSyncExternalStore, or takes a controlled online prop from products with their own health check.

KQ-540 · OFFLINE/BAR

Coldbrook dispatch6 runs queued

Connection Online

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/offline-bar

Props

online: boolean; default —; Controlled connection state. Omit it and the bar follows the browser's own online and offline events.
retryIn: number; default 10; Seconds between automatic retries; the ring sweeps once per period.
onRetry: () => Promise<boolean> | boolean; default —; Runs on every retry, automatic or pressed, from the tick or the press that caused it. Resolving true counts as connected; false restarts the countdown.
offlineLabel: string; default "No connection"; Copy while the connection is down.
onlineLabel: string; default "Back online"; Copy for the beat before the bar lifts away.

Prop	Type	Default	Description
online	boolean	—	Controlled connection state. Omit it and the bar follows the browser's own online and offline events.
retryIn	number	10	Seconds between automatic retries; the ring sweeps once per period.
onRetry	() => Promise<boolean> \| boolean	—	Runs on every retry, automatic or pressed, from the tick or the press that caused it. Resolving true counts as connected; false restarts the countdown.
offlineLabel	string	"No connection"	Copy while the connection is down.
onlineLabel	string	"Back online"	Copy for the beat before the bar lifts away.