Email Composer

Component 1

About

A minimal email draft with inline recipients, a subject, a spacious message, and an animated send action.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Email Composer to your project and fits it to your theme.

Code

How Email Composer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useEffect, useState } from 'react'
import EmailComposer from '@/components/ui/email-composer'

const draft =
  'Hi team,\n\nThe new agent component collection is ready for review. It focuses on complete application workflows rather than low-level primitives.\n\nCould you share feedback by Friday?\n\nThanks,\nSam'
const team = ['design@pastaui.dev', 'maya@pastaui.dev']

export default function Demo() {
  const [recipients, setRecipients] = useState<string[]>(team)
  const [subject, setSubject] = useState('Launch review for Pasta UI')
  const [body, setBody] = useState(draft.slice(0, 140))
  const [typed, setTyped] = useState(140)
  const drafting = typed < draft.length

  useEffect(() => {
    if (recipients.length >= team.length || typed > 0) return
    const timer = setTimeout(() => setRecipients(team.slice(0, recipients.length + 1)), 450)
    return () => clearTimeout(timer)
  }, [recipients, typed])

  useEffect(() => {
    if (!drafting || recipients.length < team.length) return
    const timer = setTimeout(() => {
      const next = Math.min(typed + 3, draft.length)
      setTyped(next)
      setBody(draft.slice(0, next))
    }, 22)
    return () => clearTimeout(timer)
  }, [drafting, recipients, typed])

  return (
    <EmailComposer
      body={body}
      className="w-full max-w-2xl"
      drafting={drafting}
      onBodyChange={setBody}
      onRecipientsChange={setRecipients}
      onSubjectChange={setSubject}
      onSubmit={() => new Promise((resolve) => setTimeout(resolve, 1100))}
      recipients={recipients}
      subject={subject}
    />
  )
}