shadcn.io is not affiliated with official shadcn/ui
Incident Response Chat Block for Radix UI
A payments war room as a thread with the latest status update pinned above it, a form that posts a new update card and replaces the pin, and an on-call pane that pages the next responder.
Installation
Overview
Run an incident from one conversation, with this incident response chat for React with Radix UI. A framed window of fixed height holds the war room of a checkout outage at Klaxonby, an on-call tool: the top bar names the incident and shows its severity as a word ("SEV 2"), and under it the latest update is pinned as a card with its impact, summary and when the next one is due. "Post an update" swaps the card for a small form built from Native Select and Input; posting it adds a formatted update card to the thread of Message and Bubble rows and replaces the pinned one. The "On call" pane lists the responders with a role and a state word, and "Page the next on-call" pages the next name in a short queue. The composer's Shine Button is the only colored control, and below 768 px a two-view switch shows the chat or the pane. It's the starting point for an incident channel, a status desk or a release room.
FAQ
What stays in the page, and how do I make it real?
Everything. The team's replies come from a short typed script keyed on words such as "rollback" and "customer", the update form only changes local state, and paging adds a name to the list: nothing is published, paged or sent, and the line under the composer says so. To wire it for real, publish the card where postUpdate builds it, call your paging service where pageNext runs, and append your team's messages to the same list as they arrive.
How does the pinned update work?
It isn't stored anywhere: the pinned card is the newest update card in the thread, found by one pure function. Post a new update and it becomes the pinned one, the update count and severity in the top bar follow it (a major impact reads SEV 1, a partial one SEV 2), and the older cards stay in the thread as the record.
Is impact shown by color?
No. Impact is a word ("Partial impact" or "Major impact") with a glyph shape, a triangle or an octagon, and severity is a word in the top bar. Nothing relies on a color to be understood.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Teague Marlow, 09:38". The form's fields have visible labels, the status line is one polite live region that reports what changed, and focus returns to "Post an update" after posting or cancelling.