Email Compose Card

​

Preview

import { EmailComposeCard } from "@/components/ui/email-compose-card";

const emailData = {
  to: ["[email protected]"],
  subject: "Project Update",
  body: "Hi there,\n\nI wanted to share the latest updates on our project. We've made significant progress this week...\n\nBest regards"
};

function handleSend(data) {
  console.log("Sending email:", data);
  // Your email sending logic
}

export default function Example() {
  return (
    <EmailComposeCard 
      emailData={emailData}
      onSend={handleSend}
    />
  );
}

​

Installation

npx shadcn@latest add "https://ui.heygaia.io/r/email-compose-card"

npm install @heroui/react zod

​

Usage

​

Basic Usage

import { EmailComposeCard } from "@/components/ui/email-compose-card";

const emailData = {
  to: ["[email protected]"],
  subject: "Hello",
  body: "Your message here"
};

<EmailComposeCard 
  emailData={emailData}
  onSend={(data) => console.log(data)}
/>

​

Draft Email

const draftEmail = {
  to: ["[email protected]"],
  subject: "Q1 Review",
  body: "Draft content...",
  draft_id: "draft_123456"
};

<EmailComposeCard 
  emailData={draftEmail}
  onSend={async (data) => {
    await sendDraft(data.draft_id, data);
  }}
/>

​

Reply to Thread

const replyEmail = {
  to: ["[email protected]"],
  subject: "Re: Meeting Notes",
  body: "Thanks for the notes...",
  thread_id: "thread_789"
};

<EmailComposeCard emailData={replyEmail} />

​

Multiple Recipients

const emailData = {
  to: [
    "[email protected]",
    "[email protected]",
    "[email protected]"
  ],
  subject: "Team Update",
  body: "Hello everyone..."
};

<EmailComposeCard emailData={emailData} />

​

Props

​

Features

​

Recipient Management

• Smart Suggestions: Provided email addresses appear as clickable chips
• Custom Emails: Users can add additional recipients not in the suggestion list
• Email Validation: Real-time validation using Zod schema
• Visual Selection: Selected recipients are highlighted and can be toggled

​

Inline Editing

• Subject: Click the edit icon to modify the subject line
• Body: Click the edit icon to switch to a textarea for full editing
• Auto-focus: Input fields automatically focus when entering edit mode
• Keyboard Support: Press Enter to save changes

​

Form Validation

• At least one recipient required
• All recipients must be valid email addresses
• Subject must be 1-200 characters
• Body must be 1-10,000 characters

​

Visual States

• Loading State: Shows spinner while sending
• Draft Badge: Displays when draft_id is present
• Reply Badge: Displays when thread_id is present
• Disabled State: Send button disabled when no recipients selected

​

Recipient Selection Modal

1. Click suggested emails to toggle selection
2. Add custom emails using the input field
3. Press Enter or click + to add custom emails
4. See selected count in the Done button
5. Click Done to apply changes

​

Email Format

const body = `Hi there,

This is paragraph one.

This is paragraph two.

Best regards,
Your Name`;

​

Styling

• Zinc color palette for light/dark mode compatibility
• Rounded corners (rounded-3xl)
• Subtle dividers between sections
• Smooth transitions on interactions
• ScrollShadow for overflow content

​

Accessibility

• Semantic HTML structure
• ARIA labels on icon-only buttons
• Keyboard navigation support
• Focus management in edit mode
• Form validation with error messages