---
title: "Email Components and Layouts"
description: "Email component library that works in Outlook, Gmail, and Apple Mail."
url: https://www.unitpost.com/email
section: "Marketing"
updated: 2026-09-04
---
# Email Components and Layouts

> Email component library that works in Outlook, Gmail, and Apple Mail.

MIT. No Unitpost account. No API key. `zod` is a peer (`^4`). Node 18+. Pass the HTML string to any sender.

## Install

Agents (no account):

```bash
npx skills add unitpostcom/email
```

Node:

```bash
npm install @unitpost/email zod
```

## Quick start

Write React components (`@unitpost/email/react`) or the same tags as a string (`parseTsx`). Both compile to inbox-safe HTML. Style with Tailwind-style `className` or `custom-css`.

```tsx
import { Section, Heading, Button, render } from "@unitpost/email/react";

const html = render(
  <Section paddingY={32}>
    <Heading level={1}>Hi Mike</Heading>
    <Button href="https://example.com">Get started</Button>
  </Section>,
);
```

No React: `parseTsx("<Section>…</Section>")` then `renderToHtml(doc)`.


Unresolved `{{tokens}}` render literally. Values are HTML-escaped; `javascript:` URLs are dropped.

## Surfaces

- [Component reference](https://www.unitpost.com/components) — props tables and live previews ([Markdown](https://www.unitpost.com/components.md))
- [Pre-built layouts](https://www.unitpost.com/components#layouts) — headers, heroes, CTAs, footers as copyable TSX
- [Playground](https://www.unitpost.com/playground) — render in the browser, no account
- [Template gallery](https://www.unitpost.com/templates/gallery) — ready-to-send transactional and marketing samples ([Markdown](https://www.unitpost.com/templates/gallery.md))
- [GitHub](https://github.com/unitpostcom/email)
- [npm](https://www.npmjs.com/package/@unitpost/email)
- HTML landing: https://www.unitpost.com/email

## FAQ

### 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.