Emails
Account and billing emails built with React Email. Each one takes typed props, renders to HTML and plain text, and reads well in light inboxes, dark mode and Outlook.
Sending emails shows how to render one and send it with any provider.
Account
- Verify email
Confirms a new address with a link or a one-time code.
- Password reset
Lets someone choose a new password, with a link or a one-time code.
- Sign-in
Passwordless sign-in with a magic link or a one-time code.
- Invitation
Invites someone to a team, with who sent it and the role they'll have.
- Welcome
The first email after sign-up: one way in, a few first steps and the trial's end date.
- Security notice
Tells someone their sign-in, password, address or two-step verification just changed.
- Account confirmation
Confirms a new address, a sensitive change or deleting the account before it happens.
Billing
- Receipt
What was paid, how and for what, with line items and tax.
- Failed payment
A payment that didn't go through, from the first failure to the final notice.
- Trial ending
A free trial about to end, and one that has ended.
- Subscription change
A plan that started, changed, is about to renew or was cancelled.
Components
- Layout
The shared shell: one bare column, the brand’s name, dark mode and the head every inbox needs.
- Typography
The heading, grey body text with its facts in ink, underlined links and the one hairline.
- Footer
Two grey lines: why the email was sent, and who sent it.
- Button
The one action an email waits on, with its full address written out beneath it.
- Code
A one-time code as large plain text, with no box.
- Facts
Three or more facts about a plan or a payment, as grey labels and ink values.
- Line items
What was bought and what it came to, with one hairline above the total.
- Device
Where something happened: the device, the place, the time and the IP address.