React email components

Use the document, card, heading, paragraph, action and divider components returned by a theme factory.

themedReactEmailComponents(themeOrPreset?) returns a component family. Pass "light", "dark" or a ReactEmailTheme; the default preset is light.

Component	Special props	Rendered structure
`EmailDocument`	`preview?`, `bodyStyle?`, HTML props including `lang`	HTML/head/body with theme styles and optional hidden preview text
`EmailCard`	Table props including `style`	Presentation table containing the card content
`EmailHeading`	`level?: 1 \| 2 \| 3`	The corresponding heading element; level defaults to 1
`EmailParagraph`	`tone?: "normal" \| "muted"`	Paragraph with normal or muted text styling
`EmailAction`	Required `href`, `variant?: "solid" \| "outline"`	Styled anchor; variant defaults to solid
`EmailDivider`	Horizontal-rule props	Themed separator

Components also accept the corresponding native React element props. Style overrides are trusted host input, not sanitized design tokens. An action renders a link, not an authenticated operation.

Shared recipe layout

The template recipes use this application helper to keep their structure consistent:

import { createElement } from "react";
import { themedReactEmailComponents } from "@corven/email-sdk/react";

const { EmailAction, EmailCard, EmailDocument, EmailHeading, EmailParagraph } =
  themedReactEmailComponents("light");

interface TransactionalEmailLayoutInput {
  readonly heading: string;
  readonly paragraphs: readonly string[];
  readonly preview: string;
  readonly action?: { readonly href: string; readonly label: string };
}

export const transactionalEmailLayout = (input: TransactionalEmailLayoutInput) =>
  createElement(
    EmailDocument,
    { lang: "en", preview: input.preview },
    createElement(
      EmailCard,
      null,
      createElement(EmailHeading, null, input.heading),
      ...input.paragraphs.map((text, index) => createElement(EmailParagraph, { key: index }, text)),
      input.action === undefined
        ? null
        : createElement(EmailAction, { href: input.action.href }, input.action.label),
    ),
  );

The helper is example code, not an SDK export. It creates trusted elements; renderReactEmail converts those elements into a body as shown in React rendering.

Hidden preview content is omitted from the renderer’s plain-text conversion. Review both representations before submission. No component validates link origins, authorizes recipients or guarantees email-client rendering.