shadcn.io is not affiliated with official shadcn/ui
No Conversations Empty State Block for Solid
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 Solid with Ark 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.