Email Composer

Write an email with recipient chips, a rich text body with a floating format bar, mentions, attachments and send later.

Select text for the format bar, type @ to mention, attach a file, then send.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/email.json

Features

Recipient chips. To, Cc and Bcc are Tag Inputs with an avatar on each chip. Contacts are suggested by name and address as you type, and anything that is not an email address is turned away with a shake.
A clean subject line. The subject is the ghost Input, with no frame of its own.
Format as you write. Select text for a floating bar with bold, italic, underline, alignment and link. Press ⌘K for a link.
Mentions. Type @ to pick a contact. The mention is a chip in the body and stays a chip in the HTML.
Attachments. The paperclip opens the file picker and each file shows as a File Upload chip with its progress, like "4.8 MB of 12 MB".
Send later. Pick tomorrow morning, tomorrow afternoon or Monday morning from the menu.
Checked before it sends. With no recipients the To field turns red and shakes. ⌘Enter sends.
Window controls. Pass onMinimizedChange, onExpandedChange and onClose to show minimise, full screen and close in the header.

Usage

import { EmailComposer } from "@/components/blocks/email"
 
<EmailComposer
  accounts={[{ name: "Mia Hart", email: "mia@invoicely.app" }]}
  contacts={contacts}
  defaultTo={["ammar@pixelworks.com"]}
  onUpload={uploadFile}
  onSend={async ({ to, cc, subject, html, files }) => {
    await sendEmail({ to, cc, subject, html, files })
  }}
  onSchedule={(draft, when) => scheduleEmail(draft, when)}
  onSaveDraft={saveDraft}
  onDiscard={() => router.back()}
/>

Props

title. The heading. "New message" by default.
accounts. The addresses you can send from. The first is selected.
contacts. Suggested recipients and @mentions.
defaultTo, defaultCc, defaultSubject, defaultBody. Starting values. The body is markdown.
onSend. Runs with the draft. A spinner shows while it runs.
onSchedule. Shows Send later and runs with the draft and the chosen time.
onSaveDraft, onDiscard. Show the save and discard buttons.
onUpload. Sends each attachment with progress. Without it files attach straight away.
minimized, onMinimizedChange, expanded, onExpandedChange, onClose. The window controls in the header.

Email Share Dialog

On This Page

Installation Features Usage Props