OfflineBanner

Dismissible offline status banner with retry action, compact mobile layout, and live-region semantics.

InterfaceSource ready6 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/offline-banner.json
Interactive preview
Interface

You are offline

Changes stay on this device and sync when the connection returns.

Install with the CLI

# adds OfflineBanner to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/offline-banner.json

Or install the package

// npm install @uigrids/react-ui
import { OfflineBanner } from '@uigrids/react-ui'

export default function App() {
  return <OfflineBanner />
}

Props

PropTypeDefaultDescription
titlestring'You are offline'Configures the title option.
descriptionstring'Changes stay on this device and sync w...Configures the description option.
retryLabelstring'Retry'Configures the retry label option.
onRetryunknown-Configures the on retry option.
onDismissunknown-Configures the on dismiss option.
classNamestring''Additional CSS classes for the outer element.