# Dash Email

> Email components for Dash wrapping React Email patterns — 15 email-safe components, table-based layouts, live preview, and sending via Resend.

---

.. toc::

.. llms_copy::Dash Email

> 📚 **Full documentation:** [dash-email-svmp.onrender.com](https://dash-email-svmp.onrender.com) — every component with isolated live examples, props tables, and the AI email builder. This page is the quick-start overview.

### Installation

[Visit GitHub Repo](https://github.com/pip-install-python/dash-email) · [PyPI](https://pypi.org/project/dash-email/)

```bash
pip install dash-email
```

### Introduction

`dash-email` bridges Python-first development with the component patterns pioneered by [React Email](https://react.email). Build email templates with familiar Dash syntax, preview them live inside your app, and export inline-styled, table-based HTML that renders correctly in Gmail, Outlook, Apple Mail, and every other major client.

*   **15 email-safe components** — structure, layout, typography, buttons, images, fonts.
*   **Email-client compatible by construction** — rows and columns render as real HTML tables; all styling is inlined.
*   **First-class Dash citizens** — every component takes an `id` and works with callbacks like any other Dash component.
*   **Send & schedule** — integrated [Resend](https://resend.com) support for single sends, batches up to 100 recipients, and scheduling.

```python
import dash_email as de
```

> Status: **early release (0.0.x)**. The component API is stable; the AI builder and sending utilities are actively evolving.

---

### Quick Start

A complete welcome email: `Email` → `EmailBody` → `EmailContainer` → `EmailSection`, with a heading, paragraph, and a bulletproof CTA button. What you see below is the live component tree rendered in the browser — the exact same tree converts to email-safe HTML at send time.

.. exec::docs.dash_email.quick_start
    :code: false


```python
# File: docs/dash_email/quick_start.py

import dash_email as de

component = de.Email(
    lang="en",
    children=[
        de.EmailBody(
            style={"backgroundColor": "#f6f9fc", "padding": "40px 0",
                   "borderRadius": "12px"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "40px",
                        },
                        children=[
                            de.EmailHeading(
                                "Welcome to 2plot.dev!",
                                as_="h1",
                                style={"color": "#1a1a1a", "marginBottom": "16px"},
                            ),
                            de.EmailText(
                                "Thanks for creating an account. You now have access to "
                                "every live component example, full API references, and "
                                "the AI documentation assistant.",
                                style={"color": "#666666", "lineHeight": "1.6"},
                            ),
                            de.EmailButton(
                                "Explore the docs",
                                href="https://2plot.dev",
                                style={
                                    "backgroundColor": "#12B886",
                                    "color": "#ffffff",
                                    "padding": "12px 24px",
                                    "borderRadius": "4px",
                                    "fontWeight": "bold",
                                },
                            ),
                        ],
                    )
                ])
            ],
        )
    ],
)
```


---

### Rows & Columns

Email clients are not browsers — floats, flexbox, and grid are unreliable or stripped entirely. `EmailRow` / `EmailColumn` are the layout primitives that survive every client: rows render as HTML tables and columns as table cells. Set widths with percentage styles on each column.

.. exec::docs.dash_email.rows_columns
    :code: false


```python
# File: docs/dash_email/rows_columns.py

import dash_email as de

# Emails are always light-themed artifacts: every text element carries an
# explicit color so the preview renders identically on the docs site's
# light AND dark modes (unstyled text would inherit the page theme color).
CELL = {"padding": "12px", "verticalAlign": "top"}
HEADING = {"color": "#1a1a1a"}
BODY_TEXT = {"color": "#666666", "lineHeight": "1.6"}

component = de.Email([
    de.EmailBody(
        style={
            "backgroundColor": "#f6f9fc",
            "padding": "32px 0",
            "borderRadius": "12px",
        },
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "borderRadius": "8px",
                        "padding": "24px",
                    },
                    children=[
                        de.EmailHeading("Two columns", as_="h3", style=HEADING),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "50%", **CELL},
                                children=[
                                    de.EmailText(
                                        "Left column — rows and columns render "
                                        "as real HTML tables, the only layout "
                                        "primitive every email client supports.",
                                        style=BODY_TEXT,
                                    )
                                ],
                            ),
                            de.EmailColumn(
                                style={"width": "50%", **CELL},
                                children=[
                                    de.EmailText(
                                        "Right column — set widths with "
                                        "percentage styles on each column.",
                                        style=BODY_TEXT,
                                    )
                                ],
                            ),
                        ]),
                        de.EmailDivider(style={"margin": "16px 0"}),
                        de.EmailHeading("70 / 30 split", as_="h3", style=HEADING),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "70%", **CELL},
                                children=[
                                    de.EmailText("dash-email Pro license",
                                                 style=BODY_TEXT)
                                ],
                            ),
                            de.EmailColumn(
                                style={"width": "30%", "textAlign": "right", **CELL},
                                children=[
                                    de.EmailText("$99.00", style=BODY_TEXT)
                                ],
                            ),
                        ]),
                    ],
                )
            ])
        ],
    )
])
```


---

### Buttons & Links

`EmailButton` is a "bulletproof" call-to-action — a styled anchor that keeps its padding and background across clients. `EmailLink` is its inline counterpart for links inside running text.

.. exec::docs.dash_email.button_cta
    :code: false


```python
# File: docs/dash_email/button_cta.py

import dash_email as de

component = de.Email([
    de.EmailBody(
        style={"backgroundColor": "#f6f9fc", "padding": "32px 0",
               "borderRadius": "12px"},
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "borderRadius": "8px",
                        "padding": "32px",
                        "textAlign": "center",
                    },
                    children=[
                        de.EmailHeading(
                            "New release: dash-leaflet2",
                            as_="h2",
                            style={"color": "#1a1a1a"},
                        ),
                        de.EmailText(
                            "Leaflet 2-native maps for Dash — 26 components, no "
                            "react-leaflet dependency. Read the announcement, or "
                            "jump straight into the interactive docs.",
                            style={"color": "#666666", "lineHeight": "1.6"},
                        ),
                        de.EmailButton(
                            "Read the docs",
                            href="https://2plot.dev/pip/dash_leaflet2",
                            style={
                                "backgroundColor": "#228be6",
                                "color": "#ffffff",
                                "padding": "12px 28px",
                                "borderRadius": "6px",
                                "fontWeight": "bold",
                                "marginRight": "8px",
                            },
                        ),
                        de.EmailText(
                            [
                                "Prefer video? Watch the walkthrough on ",
                                de.EmailLink(
                                    "YouTube @2plotai",
                                    href="https://www.youtube.com/@2plotai",
                                    style={"color": "#12B886"},
                                ),
                                ".",
                            ],
                            style={"color": "#999999", "fontSize": "13px"},
                        ),
                    ],
                )
            ])
        ],
    )
])
```


---

### The styling boundary

Email clients strip `<style>` tags and ignore most modern CSS, so every dash-email component takes a `style` dict of camelCase CSS that renders **inline** on the element.

Rules of thumb:

*   Keep content at **600px or less** — `EmailContainer` enforces this for you.
*   Multi-column layout goes through `EmailRow` / `EmailColumn` — never flexbox.
*   Prefer web-safe fonts, or load one via `EmailFont` with a `fallbackFontFamily`.
*   Always set explicit `width` / `height` + `alt` on `EmailImage`.

```python
de.EmailRow([
    de.EmailColumn(style={"width": "70%"}, children=[de.EmailText("Product")]),
    de.EmailColumn(style={"width": "30%", "textAlign": "right"}, children=[de.EmailText("$99.00")]),
])
```

---

### Sending with Resend

Templates built with these components convert to email-safe HTML and send through the [Resend](https://resend.com) API — single sends, batches up to 100 recipients, and scheduled delivery (up to 30 days ahead). Set `RESEND_API_KEY` in your environment:

```python
from utils.email_sender import send_email, component_to_html

html = component_to_html(my_email_component)
result = send_email(
    to_email="user@example.com",
    subject="Welcome!",
    html_content=html,
    from_email="hello@yourdomain.com",
    scheduled_at="in 1 hour",   # optional — ISO 8601 or natural language
)
```

This documentation site uses exactly this pipeline for its own transactional and announcement emails.

---

### Components

| Component        | Category  | What it is                                                        |
|:-----------------|:----------|:------------------------------------------------------------------|
| `Email`          | Structure | Root wrapper for the email template                               |
| `EmailHead`      | Structure | Metadata container (font imports, etc.)                           |
| `EmailPreview`   | Structure | Inbox preview text — visible next to the subject, hidden in body  |
| `EmailBody`      | Structure | Main content wrapper                                              |
| `EmailContainer` | Layout    | Centered container at the 600px email standard                    |
| `EmailSection`   | Layout    | Groups related content with its own background/padding            |
| `EmailRow`       | Layout    | Horizontal row — renders as an HTML `<table>`                     |
| `EmailColumn`    | Layout    | Column within a row — renders as a `<td>`                         |
| `EmailHeading`   | Content   | Headings `h1`–`h6` via the `as_` prop                             |
| `EmailText`      | Content   | Paragraph text                                                    |
| `EmailButton`    | Content   | Bulletproof call-to-action button (styled anchor)                 |
| `EmailLink`      | Content   | Inline hyperlink                                                  |
| `EmailImage`     | Media     | Image with explicit dimensions                                    |
| `EmailDivider`   | Media     | Horizontal rule separator                                         |
| `EmailFont`      | Media     | Web font loading with graceful fallback                           |

### Component Properties

| Property | Type | Default | Description |
|:---------|:-----|:--------|:------------|
| id | string | — | Dash callback identity — available on every component |
| style | dict | — | camelCase CSS, rendered inline for email-client safety |
| children | node | — | Child components / text |
| as_ | string | "h1" | `EmailHeading` level: `"h1"`–`"h6"` (Python-safe alias for `as`) |
| href | string | — | `EmailButton` / `EmailLink` target URL |
| src | string | — | `EmailImage` source URL |
| alt | string | — | `EmailImage` alt text |
| width / height | string \| number | — | `EmailImage` explicit dimensions |
| lang | string | "en" | `Email` document language |
| fontFamily | string | — | `EmailFont` font family name |
| fallbackFontFamily | string | — | `EmailFont` web-safe fallback |
| webFont | object | — | `EmailFont` web font source configuration |

---

*Source: /pip/dash_email*
*Generated with dash-improve-my-llms*