shadcn.io is not affiliated with official shadcn/ui
Email Composer AI Block for Vue
Polish an email in steps: To, Cc and Subject fields over a typed draft, and four refinement chips (Shorter, More formal, Add a call to action, Fix grammar) that apply fixed rules, with an Applied row, undo and a Compose or Preview tab.
Installation
Overview
Help people tighten a message before they send it, with this email composer for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an Input each for To, Subject and a Cc that a link reveals in place, so the form never changes height. Four refinement chips act on a typed draft: Shorter drops the sentences marked optional, More formal swaps typed phrase pairs, Add a call to action inserts one line before the sign-off, and Fix grammar replaces typed typos. They are fixed rules, not a model, so the same chips always give the same email. An Applied row of Badges lists what was done and Undo takes the last one back by building the email again from the original. Tabs switch between Compose, a Textarea, and Preview, which shows the message as a reader would see it, at the same height. The Shine Button, the only colored control, copies the whole email after checking the To address. Guides rule the bands. For mail clients, CRMs and any tool that drafts messages.
FAQ
What stays in the page, and how do I make it real?
Everything, and nothing is sent: there is no mail server. The draft, the phrase pairs, the typos and the call to action are typed in the file, and Copy email writes to your clipboard. To make it real, replace refine with a call to your own service and send the result through your mail provider.
What does each chip do?
Shorter drops sentences marked optional in the draft. More formal swaps five typed phrase pairs, for example Hi Dana for Dear Dana. Add a call to action puts one typed line before the sign-off. Fix grammar replaces two typed typos. Each is a plain replacement you can read in FORMAL, TYPOS and CALL_TO_ACTION.
How does Undo work, and what about my own edits?
Undo removes the last applied chip and rebuilds the email from the original draft with the ones that remain. Typing in the body is allowed, but a refinement or an Undo starts again from the original, so hand edits are replaced. The status line says when you have edited by hand.
Why does Cc not shift the layout?
The Cc row is always there. Before you reveal it, a link button sits in the field's place; after, the field replaces it, in the same cell, so the height holds.