shadcn.io is not affiliated with official shadcn/ui
Empty Inbox Chat Block for React
A team messenger inbox with no conversations: an Empty with a Start a conversation button that opens a list of colleagues, a first-message Empty in the new thread, a reply after the first send, and Delete conversation back to the empty inbox.
Installation
Overview
Show the first minute of a messenger with this empty inbox chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Hellovale, a team messenger, with the conversation list at the start and the thread beside it. At load the list is an Empty that says "No conversations yet" and holds the block's one colored control, a Shine Button "Start a conversation", and the thread pane says "Choose a conversation". The button opens a Popover of four colleagues; choosing one creates the first row, opens its thread in a first-message Empty ("Say hello to Isaura") above the composer, and your first send replaces it with the log in the same space while she replies behind a Typing Indicator Text. From then on the list header has an outline "New message" button and Send is the colored one. "Delete conversation" in the thread's top bar returns to the empty inbox. Guides rule the frame. For a messenger, a support inbox or any app whose first screen is empty.
FAQ
What stays in the page, and how do I make it real?
Everything. The four colleagues are typed in the file, the replies come from a short script and nothing is sent or saved; reloading brings back the empty inbox. To wire it for real, load the colleagues from your directory for the Popover, create the conversation on your server when the first message is sent, and fill the list from your conversations query.
What do the two Empty states do?
The list's Empty teaches the one action available and holds the only primary. The thread pane's quiet Empty says to choose a conversation. A new thread opens in a first-message Empty with no buttons; when you send, it is replaced by the log in the same space, so nothing jumps.
What does Delete conversation do?
It removes the row and its messages from the page at once, says so in the status line, and sends focus back to the start button. There is no confirmation because the demo has nothing to lose; in your app, ask first or offer Undo, and delete on the server.
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. Choosing a colleague, or a row, puts focus in the field.
Is it usable with a keyboard and a screen reader?
The list is a navigation of real buttons with the open conversation marked as current, the Popover closes with Escape and returns focus to its button, and each log is announced as a log. Every change (started, replied, deleted) is spoken once through the polite status line below the panes.