Email draft
An email the agent wrote for you to check, edit and send.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/email-draft.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/email-draft.json
Usage & API
Example
import { EmailDraft } from "@/components/ai/email-draft"
<EmailDraft
to={[]}
subject="…"
body="…"
status={status}
onEdit={() => {}}
onDone={() => {}}
onSend={() => {}}
onUndo={() => {}}
/>Props EmailDraft
| Prop | Type & description | Required |
|---|---|---|
to | Recipient[] | Required |
subject | string | Required |
body | string | Required |
status | DraftStatus | Required |
onEdit | () => void | Required |
onDone | (subject: string, body: string) => void | Required |
onSend | () => void | Required |
onUndo | () => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Draft is the only variant. The sample addresses Priya Raman and Tom Okafor at fieldwork.studio. The subject is Moving Thursday's review to Friday. The body asks to move a design review to Friday at 10:00 because the staging build will not be ready, offers Monday after lunch as a fallback, and signs off as Sam. Edit turns the subject and the body into fields and focuses the body. Done writes them back and returns to draft. Send shows Sending, then Sent, changes the header, and replaces the buttons with Undo and the line Sent to Priya and Tom · just now. Undo restores draft. The reassurance that nothing is sent yet is hidden on the narrow footer, where only the buttons remain.
Choosing a layout
Use it when the agent prepared a message and a person must approve the wording before anything is sent. A reschedule, a follow-up, or a note to more than one person fits. Keep subject and body in your state, and write them back from onDone. Treat onSend as the moment you hand the payload to whatever really sends mail. Leave status on sending until that attempt settles, then move to sent or back to draft if it failed. The card has no error status of its own, so a failure has to be a draft again plus a line of your own.
A calendar event is the better fit when the result is a meeting with a time, a room, attendees and a button to add it, not a letter. An itinerary is the better fit for a multi-day plan. A product card is the better fit for something to buy. None of those have a subject and a send step. A code block is unrelated. If the person is only reading a message that was already sent, you can still use this card in the sent status, but the interesting controls are Edit and Send, which exist before that.
Does Send actually deliver the email?
No. Send calls onSend, and if the card is currently editing it calls onDone with the subject and body first. The sample sets status to sending and, after a short timeout, to sent. There is no SMTP call and no check that the addresses exist. Delivery is whatever you do in onSend. Until you change the status, the button just sits on Sending.
What does Undo do after the pill says Sent?
It calls onUndo and nothing else. The sample handles that by setting the status back to draft, which brings Edit and Send back and clears the Sent pill. It does not unsend a real message. If you need a real recall, that belongs in onUndo, and you should only offer it when your mail system can still do it.