saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub
Introduction
Sign InSign In (Code)Sign UpSign Up (Code)Security AlertTrial 1 Welcome (Day 1)Trial 2 Activation (Day 3)Trial 3 Midpoint (Day 7)Trial 4 Ending Soon (Day 12)Trial 5 Expired (Day 14)Converted From TrialWorkspace InvitePrepopulated Workspace InviteAccepted InviteProject InviteProject JoinProject TransferPublic Project ViewWorkspace Approval RequiredPayment Request ApprovedPayment Request RejectedPayment SentPayment ReturnedPayment FailedInsufficient Workspace FundsDeposit AvailableDeposit FundsWithdraw FundsVerify Bank AccountPayment ReceivedPayment CanceledPayment Sent (Public Link)Payment Request: ReminderExternal Payment Request: ApproveExternal Payment Request: ReminderExternal Payment Request ApprovedExternal Payment Request RejectedExternal Payment Request: No FlowCard AddedCard CreatedCard Auth DeclinedCard InviteCard Invite (Workspace)Accepted Card InviteAccepted Card Invite (Workspace)Card Auth ReversedSaturation Pay: StartedSaturation Pay: SubmittedSaturation Pay: In ReviewSaturation Pay: ApprovedCredit Card: SubmittedCredit Card: In ReviewCredit Card: ApprovedInvoiceInvoice With Line ItemsPurchase Order ApprovedPurchase Order Needs ApprovalPurchase Order RejectedPurchase Order: ReminderVendor Onboarding InviteVendor OnboardedBanking Owner InviteBanking Owner VerifiedComment PostedComment ResolvedComment MentionedFailed Receipt ProcessFailed Seat ChargeFailed Subscription Renewal (Internal)Downgrade Notification (Internal)Marketing AnnouncementProduct UpdatePress Release

Email templates

Saturation's transactional emails — payments, cards, auth, vendor onboarding, trial lifecycle, team invites, and purchase orders. Each template is authored with react-email as the single source of truth, rendered here exactly as it ships to Postmark, and previewed inside a realistic email-client shell.

Example

A non-shipping showcase of the layout elements — headline, body, detail rows, and primary / secondary actions.

Saturation
Saturationhello@saturation.io

Welcome to Saturation

Today at 1:08 PM
To:stephen@saturation.io
Apple Mail

Full CSS support · Dark mode via @media prefers-color-scheme

Features

  • 73 production email templates — Covers every Saturation notification scenario: payments, cards, auth, vendor onboarding, banking owner verification, trial lifecycle, workspace invites, and purchase orders.
  • 14-day trial onboarding sequence — Five emails built for the full trial arc: welcome, activation tips, midpoint spotlight, ending-soon warning, and expired with upgrade prompt.
  • Email client preview shell — EmailClientShell wraps previews in a realistic client chrome (Apple Mail, Gmail, Outlook). The shell is for previewing only and never ships to production.
  • Postmark-ready — Single-column, mobile-safe layout built for Postmark. CSS is inlined automatically at send time and dark mode is handled via @media queries.
  • Auth and OTP emails — Magic link and 6-digit one-time-code templates, with the code formatted in a prominent block for one-tap autofill.
  • Financial workflow emails — Payment requests, approvals, ACH receipts, deposits, withdrawals, card issuance, and declined transactions. All include detail rows and status indicators.
  • Postmark variable mapping — Variables map directly to the Audience Segmentation spec: user.first_name to {{name}}, workspace.current_period_end to {{trial_end_date}}, workspace.plan to {{tier}}, and so on.
  • Composable body content — bodyChildren accepts any JSX for rich content. The details prop accepts React nodes including tables, avatars, and badges.