Back to components
ComponentAI & ChatFree
AI Mail Composer React component
A Dynamic Island-inspired email composer with tone selection, async draft generation, editable subject and body, and send states.
About the AI Mail Composer component
A Dynamic Island-inspired email composer with tone selection, async draft generation, editable subject and body, and send states.
When to use it
Turn a short writing brief into an editable email draft.
Keep AI drafting and explicit email sending in one compact panel.
Installation
Add the AI Mail Composer component to your project with the shadcn CLI. It lands in components/ai-mail-composer.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/ai-mail-composerOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<AIMailComposer /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| defaultTo | string | "alex@studio.co" |
| defaultPrompt | string | "Follow up on our design review. Share that the new prototype is ready and ask for feedba… |
| onGenerate | (prompt: string, tone: MailTone) => Omit<MailDraft, "to"> | Promise<Omit<MailDraft, "to">> | — |
| onSend | (draft: MailDraft) => void | Promise<void> | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- defaultTostringDefault: "alex@studio.co"
- defaultPromptstringDefault: "Follow up on our design review. Share that the new prototype is ready and ask for feedba…
- onGenerate(prompt: string, tone: MailTone) => Omit<MailDraft, "to"> | Promise<Omit<MailDraft, "to">>
- onSend(draft: MailDraft) => void | Promise<void>
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
AI Mail Composer FAQ
- Does this send real emails?
- Only when you provide onSend. Without it, Save draft confirms the local demo draft. onGenerate should return a subject and body from your own API; otherwise sample drafts are used.
- Can users edit the generated email?
- Yes. Recipient, subject and body remain editable before sending. Generation and send failures are shown inline, and input is preserved for retry.
