Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Connectivity Live Banner Block for Ark UI

A connection top bar for a collaborative editor, wired to the browser's online and offline events: Connected, then "You're offline" with a Retry now button and a tinted strip, then "Back online" for a few seconds.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A connection top bar for React with Ark UI, for an app that keeps working when the network doesn't. One centred line under the page's top rule starts on "Connected to realtime sync" with a green dot. When the browser fires its offline event the line becomes "You're offline, changes are saved on this device", the dot turns to the warning colour, a faint tint fills the strip, and a Retry now button appears inline; when online fires it says "Back online, your changes are synced" for four seconds and settles on Connected again. All four lines share one grid cell, so the bar never changes height, and a polite status line that is in the page from the start announces each change. It's built from Guides and Status, with CSS transitions and your theme's tokens for every colour. For editors, dashboards and any surface with realtime sync.

FAQ

How do I see the offline state?

The preview shows the connected line, because the browser is online. Open your browser's developer tools, go to the Network panel and switch throttling to Offline (or use the device toolbar's offline option): the bar changes at once. Switch it back and the bar says "Back online" for four seconds. The same works in an automated test by setting the browser context offline.

What does it actually listen to?

The offline and online events on window, plus navigator.onLine once after the first render, so a page opened while offline starts on the offline line. The listeners are removed when the block unmounts. The server always renders the connected line, and the browser corrects it after the first render, so the two never disagree.

What does Retry now do?

It shows "Checking your connection…" for about a second, then reads navigator.onLine once and settles on Back online or back on offline. That flag only says whether the device has a network, not whether your server answers. For a real check, replace the timer in the checking effect with a request to a small health endpoint and set the result from its answer.

What do screen readers hear?

A status line that is in the page from the start, visually hidden, gets its text when the state changes: "You're offline. Changes are saved on this device." and "Back online. Your changes are synced." Nothing is announced at load, and the Connected line is silent when it returns after Back online. The visible lines that aren't current are hidden from assistive technology and can't take focus.

Why doesn't the bar jump between states?

Each line sits in the same grid cell and the lines that aren't showing are invisible, so the cell is as tall as the tallest. On a phone the longer offline line wraps to two lines, and the bar keeps that height in every state, so the page below never shifts.

Does it follow my theme?

Yes. The tint is bg-muted/50 on the section only while the bar is offline, fading in and out with a CSS transition (none with reduced motion). The dots use the success and warning tokens; the text stays in the foreground colours.

All 100 banner blocks