Email Components

Overview

send0 ships a JSX-based component library for building email templates. Use the @jsxImportSource send0 pragma — no React dependency needed.

Setup

In your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "send0"
  }
}

Or per-file:

/** @jsxImportSource send0 */

Then import components:

import { Template, Text, Button, Section } from 'send0/components';

Full example

/** @jsxImportSource send0 */
import { Template, Text, Heading, Button, Section, Divider, Image } from 'send0/components';

export default function WelcomeEmail({ name, company }: { name: string; company: string }) {
  return (
    <Template preview={`Welcome to ${company}!`} backgroundColor="#f8fafc">
      <Section padding="32px" backgroundColor="#ffffff" borderRadius="8px">
        <Image
          src="https://yourdomain.com/logo.png"
          alt={company}
          width={120}
        />
        <Heading as="h1">Welcome, {name}!</Heading>
        <Text>
          Thanks for joining {company}. We are excited to have you on board.
        </Text>
        <Button href="https://app.example.com/onboarding">
          Get Started
        </Button>
        <Divider />
        <Text muted>
          If you did not create this account, you can safely ignore this email.
        </Text>
      </Section>
    </Template>
  );
}

Rendering

Use the render function to convert components to HTML:

import { render } from 'send0/components';
import WelcomeEmail from './emails/welcome';

const { html, text } = render(WelcomeEmail({ name: 'Jane', company: 'Acme' }));

await send0.emails.send({
  from: 'hello@acme.com',
  to: 'jane@example.com',
  subject: 'Welcome to Acme!',
  html,
  text,
});

Components Reference

Template

Root wrapper for every email. Generates a full HTML document with DOCTYPE, viewport meta, and MSO conditionals for Outlook.

<Template
  preview="Preview text shown in inbox"
  backgroundColor="#f8fafc"
  width={600}
  fontFamily="Arial, sans-serif"
>
  {children}
</Template>

Prop	Type	Default	Description
`preview`	`string`	—	Preview text shown in email clients
`backgroundColor`	`string`	`#ffffff`	Background color
`width`	`number`	`600`	Max width in pixels
`fontFamily`	`string`	System fonts	Font stack

Text

Paragraph text with variant support.

<Text>Regular paragraph text.</Text>
<Text bold>Bold text.</Text>
<Text muted>Muted secondary text.</Text>
<Text small>Smaller text for fine print.</Text>
<Text center>Centered text.</Text>

Prop	Type	Default	Description
`bold`	`boolean`	`false`	Bold weight
`muted`	`boolean`	`false`	Gray color
`small`	`boolean`	`false`	Smaller font size
`center`	`boolean`	`false`	Center aligned

Heading

Heading levels h1-h6.

<Heading as="h1">Main Title</Heading>
<Heading as="h2">Section Title</Heading>
<Heading as="h3">Subsection</Heading>

Prop	Type	Default	Description
`as`	`'h1' \| 'h2' \| ... \| 'h6'`	`'h2'`	Heading level

Button

Bulletproof email button with VML fallback for Outlook.

<Button href="https://example.com">Click Me</Button>
<Button href="https://example.com" variant="secondary">Learn More</Button>

Prop	Type	Default	Description
`href`	`string`	—	Button link URL (required)
`variant`	`'primary' \| 'secondary'`	`'primary'`	Button style

Image

Responsive image with optional alignment.

<Image src="https://example.com/photo.jpg" alt="Photo" width={400} />
<Image src="https://example.com/logo.png" alt="Logo" width={120} align="center" />

Prop	Type	Default	Description
`src`	`string`	—	Image URL (required)
`alt`	`string`	—	Alt text (required)
`width`	`number`	—	Width in pixels
`height`	`number`	—	Height in pixels
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Alignment
`borderRadius`	`number`	`0`	Border radius in pixels

Section

Container with padding and optional background.

<Section padding="24px" backgroundColor="#f1f5f9" borderRadius="8px">
  <Text>Content inside a styled section.</Text>
</Section>

Prop	Type	Default	Description
`padding`	`string`	`'0'`	CSS padding
`backgroundColor`	`string`	—	Background color
`borderRadius`	`string`	—	Border radius

Columns / Column

Multi-column layout using table cells.

<Columns>
  <Column>
    <Text>Left column content</Text>
  </Column>
  <Column>
    <Text>Right column content</Text>
  </Column>
</Columns>

Note: Columns uses HTML tables for maximum email client compatibility.

Link

Styled anchor tag.

<Link href="https://example.com">Visit our website</Link>

Prop	Type	Description
`href`	`string`	Link URL (required)

Divider

Horizontal rule / separator.

<Divider />
<Divider color="#e2e8f0" margin="24px 0" />

Prop	Type	Default	Description
`color`	`string`	`#e2e8f0`	Line color
`margin`	`string`	`'16px 0'`	Margin

Raw

Inject raw HTML. Use for trusted content only.

<Raw html="<table><tr><td>Custom HTML</td></tr></table>" />

On this page