shadcn.io is not affiliated with official shadcn/ui
Email Composer Chat Block for Ark UI
A team thread whose composer switches between Chat and Email: Email adds To tags with suggestions, a subject and bold, italic and list marks, and sends an email card into the log.
Installation
Overview
Switch from talking to emailing without leaving the thread with this email composer chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Mailthorpe, a team inbox, drawn in Email mode with one address staged. A Segment Group above the field switches between Chat and Email. Email adds a To field where addresses become removable tags in a Tags Input with three typed suggestions beneath, a subject Input, and a Bold, Italic and List row that wraps or prefixes the selected text of the body with markdown marks. The Shine Button, the only colored control, sends: in Chat it posts a bubble, in Email it posts an email card with the addresses, the subject, the body with its marks drawn and a line saying nothing was emailed. A missing or malformed address, subject or body shows a problem line and moves focus to the field. The frame is ruled by Guides. For a shared inbox, a CRM thread or any conversation that sometimes needs a formal message.
FAQ
How does the To field validate addresses?
Typing a comma, pressing Enter, leaving the field or pasting a list adds the address as a tag, but only when it has the shape of an email address and is not there already. Anything else is refused and the problem line says why. Tags are removed with their own button or with Backspace in the empty field. The three suggestions add with one press and disable once added.
What do the format buttons do?
They act on the selected text of the body. Bold wraps it in two asterisks, Italic in one, and List puts a dash and a space at the start of each selected line; with nothing selected, bold and italic insert the word "text" selected so you can type over it. The email card draws the marks as bold, italic and bullets. It is a small, honest markdown subset, not a full editor.
What stops an email from sending?
No address, no subject or an empty body. The first missing piece is named in the line above the status, focus moves to that field, and the line clears as soon as you change anything. Nothing is posted until all three are present.
Is an email really sent?
No. The card says "In this demo nothing was emailed", and the addresses use example domains. In your app, send the message from the Email branch of the handler through your mail service and post the card from its result; the Chat branch stays a normal message.