Connection banner

Free

Says when the app lost its connection and what that means, counts down to the next try, and confirms when it is back.

Installs components/ui/connection-banner.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/connection-banner.json

When to use #

Use it for

Apps that keep working offline or queue changes.
Realtime tools where a dropped connection loses updates.

Skip it when

Static sites; the browser already says so.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/connection-banner.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { ConnectionBanner } from "@/components/ui/connection-banner"

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function ConnectionBannerDemo() {
  const [online, setOnline] = useState(true);
  const tries = useRef(0);
  return (
    <div className="grid w-full max-w-md gap-3">
      <ConnectionBanner
        online={online}
        onRetry={async () => {
          await wait(700);
          tries.current += 1;
          // The second try succeeds, as a real reconnect would.
          if (tries.current >= 2) {
            tries.current = 0;
            setOnline(true);
            return true;
          }
          return false;
        }}
      />
      <Button size="sm" variant="secondary" className="w-fit" onClick={() => setOnline((value) => !value)}>{online ? "Go offline" : "Come back online"}</Button>
    </div>
  );
}

API reference #