React components for building emails, pages, and documents in code.
Write email templates, landing pages, and printable documents using familiar React components. Unlayer Elements renders to three distinct outputs from the same component tree:
- Email — table-based HTML safe for Outlook, Gmail, Yahoo, and all major email clients
- Web — responsive div + flexbox HTML for web pages
- Document — print-optimized HTML for PDF generation
npm install @unlayer/react-elementsimport {
Email, Row, Column, ColumnLayouts,
Heading, Paragraph, Button, renderToHtml
} from '@unlayer/react-elements';
function WelcomeEmail() {
return (
<Email backgroundColor="#f0f0f0" contentWidth="600px">
<Row layout={ColumnLayouts.OneColumn} backgroundColor="#ffffff" padding="20px">
<Column>
<Heading
fontSize="24px"
fontFamily={{ label: "Arial", value: "arial,helvetica,sans-serif" }}
>
Welcome!
</Heading>
<Paragraph html="Thanks for signing up." fontSize="14px" />
<Button
href="https://example.com"
backgroundColor="#0879A1"
color="#ffffff"
>
Get Started
</Button>
</Column>
</Row>
</Email>
);
}
// Render to a clean HTML string — no React hydration markers
const html = renderToHtml(<WelcomeEmail />);- 15 components — Button, Heading, Paragraph, Image, Divider, Social, Menu, Table, Video, Html, and layout primitives (Email, Page, Document, Row, Column)
- 3 render modes — Email (tables), Web (flexbox), Document (print) from the same JSX
- Server Components — works with Next.js App Router, Remix, and any SSR framework
- Clean HTML output —
renderToHtml()produces production-ready HTML with no framework artifacts - Design JSON —
renderToJson()exports Unlayer-compatible design JSON for round-tripping with the visual editor - TypeScript-first — full type definitions with autocomplete for every prop
- Tiny bundle — under 50KB ESM, tree-shakeable, zero client-side JS required
| Component | Description |
|---|---|
<Email> |
Root wrapper — email-safe HTML (tables for Outlook/Gmail) |
<Page> |
Root wrapper — responsive web (div + flexbox) |
<Document> |
Root wrapper — print/PDF optimized |
<Row> |
Layout container with column layout support |
<Column> |
Column inside a Row |
<Button> |
CTA button with hover states and links |
<Heading> |
Heading (h1–h4) |
<Paragraph> |
Rich text with plain text or HTML content |
<Image> |
Responsive image with alt text |
<Divider> |
Horizontal separator |
<Social> |
Social media icon links |
<Menu> |
Navigation menu |
<Table> |
Data table |
<Video> |
YouTube/Vimeo embed |
<Html> |
Custom HTML passthrough |
Components follow a strict hierarchy:
<Email> ← sets render mode
<Row layout={…}> ← layout container
<Column> ← must match layout column count
<Button /> ← content components
<Paragraph />
</Column>
</Row>
</Email>
import { Row, Column, ColumnLayouts } from '@unlayer/react-elements';
// Each Row must contain the matching number of <Column> children.
<Row layout={ColumnLayouts.OneColumn}> {/* [1] → 100% */}
<Column>{/* content */}</Column>
</Row>
<Row layout={ColumnLayouts.TwoEqual}> {/* [1,1] → 50% + 50% */}
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
</Row>
<Row layout={ColumnLayouts.TwoWideNarrow}> {/* [2,1] → 67% + 33% */}
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
</Row>
<Row layout={ColumnLayouts.ThreeEqual}> {/* [1,1,1] → 33% each */}
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
</Row>
<Row layout={ColumnLayouts.FourEqual}> {/* [1,1,1,1] → 25% each */}
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
</Row>
<Row cells={[3, 1]}> {/* custom ratio */}
<Column>{/* content */}</Column>
<Column>{/* content */}</Column>
</Row>For the full API reference, component props, design patterns, and common mistakes, see the React package documentation.
| Package | Description | Published |
|---|---|---|
@unlayer/react-elements |
React components and renderers | |
@unlayer-internal/shared-elements |
Framework-agnostic shared logic | Internal |
@unlayer/elements-demo |
Demo application | — |
# Prerequisites: Node.js (see .nvmrc), pnpm 9+
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Launch Storybook
pnpm storybook:hubSee CONTRIBUTING.md for setup instructions and guidelines.
MIT — Unlayer, Inc.