shadcn.io is not affiliated with official shadcn/ui
Chat Empty State AI Block for React
The first screen of an assistant: an empty log with a greeting and six starter cards that fill the composer without sending, then a thread with a typed reply, and a New chat button that brings the cards back.
Installation
Overview
Greet people before the first message, with this AI chat empty state for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Wrenlark, an everyday assistant. The log is empty and centred: a greeting, one line of help and six starter cards in a grid, each with an icon, a title and an example (a trip, an email, an explanation, a bug, a dinner plan, names for a bakery). Pressing a card writes its example into the Textarea and moves focus there, and it does not send, so you can change the words first. The Shine Button, the only colored control, sends: the cards leave, your message lands as a Bubble, and the answer arrives in pieces after a Typing Indicator Text while Send turns into Stop. New chat in the top bar clears the thread and brings the cards back. It's built from Message, Bubble, Textarea, Button and Guides, with CSS only.
FAQ
What stays local, and how do I make it real?
Everything. Each card carries the example it writes and a typed answer in two pieces, picked by a word in your message; anything else says the demo only knows the six starters. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the message in post and replace the typed pieces with the stream you receive. The cards are the STARTERS list: change a title and an example, or add a card.
Why do the cards fill the field instead of sending?
A starter is a suggestion, not a command. Filling the field lets people change the city, the name or the tone before they send, and it shows that the field is where the conversation happens. Focus moves to the field after the press and a polite line says which card was used.
Does the window change size between the two states?
No. The window keeps its height; the greeting and the cards sit in the scrolling log and are replaced by the thread in the same box. On a short screen the cards scroll inside the log, one column wide, and the composer stays at the foot.
What does New chat do?
It clears the thread, any reply that is on its way and the draft, brings the cards back and moves focus to the field. When the chat is already new it only says so in the status line, so the press is never silent.
Is it usable with a keyboard and a screen reader?
The cards are buttons read as their title and example, in a list. The log is a focusable region announced as a log, the field has a hidden label and a hint, and the send and Stop buttons have hidden names. One polite line says what happened: "Plan a trip: edit it or press Send.", "Wrenlark is writing.", "Wrenlark replied.".