Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Notification Connection Lost Block

A connection lost warning notification block for React and Next.js with red status indicator, reconnection spinner, retry button, last connected timestamp, and troubleshooting tips built with shadcn/ui and Tailwind CSS

Alert users to network disconnections with this connection lost notification block for React and Next.js. Features a red status dot, animated reconnection spinner with attempt counter, a manual retry button, last connected timestamp, and expandable troubleshooting suggestions. Built with TypeScript, shadcn/ui Button components, Framer Motion staggered entrance animations, Balancer for balanced text, and Tailwind CSS. Perfect for real-time applications, WebSocket-powered dashboards, and collaborative editing tools.

Notification Connection Lost Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 24, 2026

Was this page helpful?

Sign in to leave feedback.