shadcn.io is not affiliated with official shadcn/ui
Chat Connection Error State Block for Vue
A narrow messenger thread whose network drops: a panel docks over the log with Retry now, the first two attempts fail and the third succeeds, a Simulate choice makes it stay down, and Send says Reconnect to send while the draft is kept.
Installation
Overview
Show a conversation that lost its connection with this chat error state for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Tideholm, a team messenger: the top bar names Eskil Thornbury with a hollow ring and "Tideholm, can't connect", and an Alert docks over the top of the log with a warning glyph, "Can't reach Tideholm", "Attempt 1 of 4 failed. Your messages are kept." and an outline "Retry now". The history behind it can't be reached, the composer stays below, and Send says "Reconnect to send" while your draft is kept. Each press of Retry is an attempt with a spinner and "Attempt 2 of 4"; the first two fail and the third succeeds, the panel goes with "Back online", and a reply works again. A small Simulate choice makes the line stay down, and after four failed attempts the panel says "Couldn't reconnect" and offers "Try again". The frame is ruled by Guides, and the Shine Button sends. Use it for a messenger, a live chat widget or any thread that must fail without losing a word.
FAQ
What stays in the page, and how do I make it real?
Everything. The outcome of each attempt is typed in the file (the third succeeds, or none with Simulate set to "Stays down"), and each attempt takes about a second. To wire it for real, replace the timer with your reconnect call, keep done as the number of failed attempts, and send the kept draft and queued messages when the call succeeds. The category for page-level errors has its own blocks; this one is the thread.
Does anything run on its own?
No. At load the panel is open on a failed first attempt and nothing happens until you press Retry now; each press starts one timer of about a second. The Simulate choice ("Comes back on attempt 3" or "Stays down") is the demo's own control and says so, and changing it reopens the panel.
Where do my messages and my draft go while it is down?
Nowhere: the history stays where it was, behind the panel and out of reach, and the text you typed stays in the field. Send is marked aria-disabled with "Reconnect to send"; pressing it, or Enter, only says so in the status line. When the line comes back, focus returns to the field.
How is the problem shown without color?
By a warning glyph, the title "Can't reach Tideholm" and the words "Attempt 2 of 4 failed"; the glyph is the only element in the destructive tone, and the top bar uses a hollow ring against a filled dot with the words "online" and "can't connect".
Is it usable with a keyboard and a screen reader?
The panel is an alert, so it is announced when it appears; each attempt and each outcome is spoken once through the polite status line. The log behind the panel is inert so keyboard focus can't land on content that can't be used, and Retry is a real button that keeps its place while it works.