Banner Live Connectivity

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner34.tsx instead.

Usage

The file also exports banner34Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner34, banner34Demo } from "@/components/blocks/banner/banner34";

export default function Page() {
  return <Banner34 {...banner34Demo} />;
}

Props

Behavior notes

• The dot uses a two-layer span, a solid inner dot plus an animate-ping outer halo, with color driven entirely by the online boolean so the same markup covers both states.
• The retry action is an inline link with an arrow icon rather than a button, matching the rest of the live-status blocks in this category and keeping the row from reading as a form.
• The demo ships in the offline state on purpose, since the reconnect message is the part of this block worth showing off.

Frequently asked questions