shadcn.io is not affiliated with official shadcn/ui
No Threads Empty State Block for React Aria
A 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.
Installation
Overview
Start a board's first conversation as the thread it is about to become, with this no threads empty state for React with React Aria. It is the first-thread page of Mootwell, a discussion board: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. In the band three starters are cards in a Toggle Group, Ask a question, Share an update and Make a decision, and each carries a small drawn sketch of the thread it makes: a post that is only dashed until you have started that kind, with the reply, the reactions or the vote it would get. Picking a starter writes a sample title into the Input of a Field; the details go in a Textarea. The Shine Button, the only colored control, starts the thread: it joins the list under the form with "0 replies" and its starter's sketch turns solid. The frame is ruled by Guides, and everything moves with CSS transitions only. For the first screen of a forum, a team board or any app whose conversations are threads.
FAQ
What stays in the page, and how do I make it real?
Everything: the thread joins a list in the page's state, nobody is notified and nothing is saved, so a reload empties it and Start over empties it without one. To wire it for real, send the title, the details and the chosen starter to your API where the code says so, add the row from the response, and show a failure in the status line under the button.
What does a starter do?
It writes a sample title for that kind into the title field and changes what the details field asks for, such as "Say what you have tried so far" for a question. The title is yours to edit before you start the thread, and a thread started without a starter is a plain thread. The sketch of a kind turns solid once a thread of that kind is on the list.
Why does the list stop at three threads?
So the page behaves the same each time: the list holds a place for the next thread, drawn as a dashed row, and the demo lists three. At three the button says why it is quiet and Start over clears the list. In your app let the list grow and keep the dashed row for the empty state only.
What if I press Start thread with no title?
Nothing is added: the field says "Add a title to start the thread" and takes focus. Typing clears the message. Titles are trimmed and limited to 80 characters.
Is it usable with a keyboard and a screen reader?
The starters are one group named Pick a starter, so one Tab stop reaches it and the arrow keys move between the cards. Then come the title, the details, Start thread and Start over. One polite status line under the button says what changed, such as "Thread started in this demo. Nobody was notified." The sketches are hidden from assistive technology and each card's name and line are real text.
How does it look on a phone?
The starters become rows with the sketch at the start, and the Start thread button sits in a foot pinned to the bottom of the screen, so it is always in reach while you write. The list is under the form and grows downwards, so the heading never moves. Nothing scrolls sideways, even at 320 px wide.