PWA UIv0.1
Documentation
Docs / Components / OfflineBanner

Component

OfflineBanner

OfflineBanner keeps connectivity context close to the application without blocking work. Pair it with useNetworkStatus and treat the signal as a hint rather than proof that a server is reachable.

Preview

You're offline. Some information may be out of date.

Installation

bash
pnpm dlx shadcn@latest add https://pwaui.com/r/offline-banner.json

Usage

tsx
"use client"
import { OfflineBanner } from "@/components/ui/offline-banner"import { useNetworkStatus } from "@/hooks/use-network-status"
export function ConnectivityBanner() {  const { status } = useNetworkStatus()
  if (status !== "offline") return null
  return <OfflineBanner />}

Anatomy

OfflineBannerstatus indicatormessageoptional action

Behavior notes

  • Place it in normal document flow so it pushes content rather than covering it.
  • Do not disable important actions solely because navigator.onLine reports offline.
  • Use an action slot for a contextual retry or troubleshooting link when appropriate.

Accessibility

The message uses a polite status live region, includes visible text rather than color alone, and does not interrupt the current task.