Email UI

Start with a real email, see the rendered result, then copy the TSX into src/ui/email. Every example uses the same small set of Email SDK React components and works with any adapter after rendering.

Account

Sign-in, recovery, and workspace access.

Verification code

→

A focused one-time code with a clear expiry.

Password reset

→

A secure reset action with request context.

Team invite

→

A personal invitation to join a workspace.

Product

Activation, retention, and product limits.

Welcome

→

A useful first step after account creation.

Trial ending

→

An honest reminder before a trial expires.

Usage alert

→

A calm limit warning with a direct next action.

Commerce

Payments, invoices, and money movement.

Receipt

→

A compact payment confirmation and receipt link.

Invoice due

→

A clear invoice summary before payment is due.

Refund confirmed

→

A reassuring refund status with timing details.

Add a template

Open any template above and run its registry command. The command adds the email component to src/ui/email and installs Email SDK, React Email, and React dependencies when they are missing.

bunx shadcn@latest add https://email-sdk.dev/r/verification-code.json

Then render the installed component with renderEmail and pass the returned html and text through your normal Email SDK client.

import { renderEmail } from "@opencoredev/email-sdk/react";

const content = await renderEmail(<WelcomeEmail name="Ada" />);

await email.send({
  from: "Acme <hello@acme.com>",
  to: "ada@example.com",
  subject: "Welcome to Acme",
  ...content,
});

Routing, retries, fallback, scheduling, hooks, and telemetry still use the normal send pipeline.