shadcn.io is not affiliated with official shadcn/ui
No Conversations Empty State Block for React
A support inbox with no conversations: two drawn speech bubbles, one dashed, a list with one dashed place, and a card where you pick a customer and write a first message that becomes a bubble in a thread.
Installation
Overview
Open a support inbox with its first conversation, with this no conversations empty state for React with Base UI. It is the page of Murmurly, a support inbox: the page's two side rails run its full height and one band crosses the screen, split in two. At the start the heading, a drawing of two overlapping speech bubbles, theirs solid and yours only dashed, and the list of conversations, which is one dashed place. At the end a card to start one: an Autocomplete in a Field that takes a customer from three, a Textarea for the first message, and the Shine Button, the only colored control, Start conversation. It turns the dashed bubble solid, adds a row to the list with the customer's initials in an Avatar, the first words and "Sent in this demo", and replaces the form with the thread: your message as a Message bubble. The frame is ruled by Guides, and everything moves with CSS transitions only. For the first screen of a helpdesk, a shared inbox or a CRM.
FAQ
What stays in the page, and how do I make it real?
The conversation: the page keeps the customer and the message in its state, nothing is delivered and a reload empties it. Start over puts the form back without one. To wire it for real, send the customer's id and the message to your inbox API where the code says so, add the row from the response, and show a failure in the status line.
How does the customer field work?
Type to filter the three customers by name or address, then pick one with the pointer, or with the arrow keys and Enter. Only a listed customer counts: free text that is not a name leaves the button quiet and the field says "Choose who to write to" when you press it. In your app load matches from your own search and keep the list short.
What if the message is empty?
Nothing starts: the field says "Write the first message" and takes focus. Messages are limited to 240 characters. Once a conversation is started the form is replaced by the thread, so a second one needs Start over.
Is it usable with a keyboard and a screen reader?
Tab runs through the customer field, the message, Start conversation and Start over. Starting a conversation moves focus to the customer's name above the thread, which is announced along with a polite status line that says nothing was delivered. The drawing is hidden from assistive technology, and the thread is a named list of messages.
How does it look on a phone?
Everything stacks, the drawing is 112 px tall, and the Start conversation button sits in a foot pinned to the bottom of the screen so it is in reach while you write. The thread and the form share one space, so starting a conversation never moves the page, and nothing scrolls sideways, even at 320 px wide.
Related
- Pro
No Messages Empty State
Inbox and chatA mail app's empty inbox: tabs with their counts, a drawn letter tray with a dashed envelope, and a Compose button, or the C key, that opens a dialog whose Send fills the Sent tab.
- Pro
No Threads Empty State
Inbox and chatA discussion board's first thread: three starter cards with drawn thread sketches, a title and details, one Start thread button and a list of the threads you start.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Chat History Empty State
Inbox and chatAn AI assistant's empty history in a framed window: the sidebar says No chats yet, a drawing of three stacked speech cards and four prompt chips lead to a log and composer with sample replies.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
No Channels Empty State
Inbox and chatA team chat before the team joins a channel: the browse dialog shown open in place over a drawn chat shell, with a hash sign, a search that filters five channels, a Join toggle on each and one Join button that counts them.