A minimal email draft with inline recipients, a subject, a spacious message, and an animated send action.
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}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.