Unitpost

Production-ready

Email Components and Layouts

Add to a project.

npm i @unitpost/email zod

Welcome

Payment receipt

Newsletter

Explore 20+ more templates

Transactional and Marketing

Quick start

Install, compose, render

Three steps from a blank project to inbox-safe HTML. No account.

01

Install
Add the package. Or teach your agent with a skill.
Terminal
npm install @unitpost/email zod
npx skills add unitpostcom/email

02

Compose
Import the catalog. Types and JSX in your editor.
email.tsx
import { Heading, Text, Button } from "@unitpost/email/react";

export function Welcome() {
  return (
    <>
      <Heading className="text-2xl font-semibold">Welcome, Mike</Heading>
      <Text>You're in.</Text>
      <Button className="bg-black text-white" href="https://example.com">
        Get started
      </Button>
    </>
  );
}

03

Render
Inbox-safe HTML. Same renderer as the visual editor.
render.ts
import { render } from "@unitpost/email/react";

const html = render(<Welcome />);

Clients

Works in Outlook, Gmail, Apple Mail and other

Table layout, inline CSS. Same markup as the playground.

  • Outlook
  • Gmail
  • Apple Mail
  • Yahoo Mail
  • and other

Library

Components, layouts, HTML you can send

Constrained TSX. Tailwind or CSS. Inbox-safe markup. This package does not send mail.

Components

Heading, Text, Button, Image, Row, Section. className compiles to inline CSS.

Layouts

Headers, heroes, CTAs, footers. Paste and edit.

Any sender

MIT. Render HTML and send it anywhere.

Components

Read Docs

Heading

Text

Button

Image

Section

Spacer

Divider

Row

Column

Link

Markdown

Code

Html

Layouts

Read Docs

Logo header

Logo + links

Simple hero

Image hero

Status hero

Card

Detail rows

Verification code

Quote / callout

Action feature

Announcement banner

Article feature

Split 50/50

Two cards

Three features

Numbered steps

CTA band

Centered CTA

Simple footer

Rich footer

Footer + apps

Playground

Write email code and see the exact HTML the send engine produces — live in your browser, nothing to install.

Open playground

Questions

Common questions

What is @unitpost/email?

An MIT-licensed email component library that works in Outlook, Gmail, and Apple Mail. Import Heading, Text, Button from @unitpost/email/react and call render(), or parseTsx a string if you are not using React. Pass the HTML to any sender. No Unitpost account and no API key.

How do I install the email component library?

For coding agents, run npx skills add unitpostcom/email — that teaches the catalog, React imports, parseTsx, render, and layouts with no account. For Node, run npm install @unitpost/email zod. zod is a peer; React is optional (only if you import @unitpost/email/react). Node 18+.

Do I need a Unitpost account to use it?

No. The package renders HTML locally and works fully offline. The playground and template gallery are also free without an account. Unitpost can send the HTML if you want a sender; any other API or SMTP relay works too.

How do I compose and render an email?

In a React app, import Section, Heading, Button from @unitpost/email/react and call render(<Email />). Without React, write the same tags as a string and call parseTsx then renderToHtml. Both produce the same document the visual editor uses. className compiles to inline CSS. {{tokens}} fill at send time.

How do I style emails — Tailwind, CSS, or something else?

All of those, as long as they compile. Tailwind-style className on any block (class and tw work too) becomes inline CSS at render; responsive and pseudo variants go in a <style> block. custom-css takes raw CSS declarations and inlines those. Spacing, color, and alignment are also props. Recipients never load a stylesheet — renderToHtml emits the inline CSS Outlook, Gmail, and Apple Mail paint.

Does it work in Outlook, Gmail, and Apple Mail?

Yes. That is the point of the library: one document, inbox-safe HTML for Outlook, Gmail, and Apple Mail. Live previews on the component reference and the playground use the same renderer as production sends.

Where are the components, layouts, and examples?

Component props and live previews are at /components. Pre-built bands (headers, heroes, CTAs, footers) are at /components#layouts. Ready-to-send samples are in the template gallery. The playground at /playground renders the same HTML with no install.

Unitpost

Start sending for free

$0/ mo

  • 5,000 emails / mo — no credit card
  • Your domain with DKIM, SPF & DMARC
  • REST API, SMTP & official SDKs
  • Visual editor + code templates
  • Open & click tracking + signed webhooks
  • 10,000 contacts · automatic suppression
Start for free