# Getting Started

> Install dash-email and build your first email template in minutes.

**Site index:** [https://email.2plot.dev/llms.txt](https://email.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://email.2plot.dev/sitemap.xml  


---



### Installation

Install from PyPI:

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

dash-email requires **Python 3.9+** and **Dash 4.2+**.

---

### Your first email

Every email starts with the same skeleton: `Email` → `EmailBody` → `EmailContainer` → content.
The components render table-based, inline-styled HTML that survives Gmail, Outlook, and Apple Mail.


Source code:


```python
# File: docs/getting-started/quickstart.py

import dash_email as de

component = de.Email(
    lang="en",
    children=[
        de.EmailBody(
            style={"backgroundColor": "#f6f9fc", "padding": "40px 0"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "40px",
                        },
                        children=[
                            de.EmailHeading(
                                "Welcome!",
                                as_="h1",
                                style={"color": "#1a1a1a", "marginBottom": "16px"},
                            ),
                            de.EmailText(
                                "Thanks for signing up. We're excited to have you!",
                                style={"color": "#666666", "lineHeight": "1.6"},
                            ),
                            de.EmailButton(
                                "Get Started",
                                href="https://example.com",
                                style={
                                    "backgroundColor": "#228be6",
                                    "color": "#ffffff",
                                    "padding": "12px 24px",
                                    "borderRadius": "4px",
                                    "fontWeight": "bold",
                                },
                            ),
                        ],
                    )
                ])
            ],
        )
    ],
)
```


---

### Components are callback-ready

Every dash-email component is a first-class Dash component — give it an `id`
and update it from callbacks like any other component. Type in the input below
and watch the email headline update:


Source code:


```python
# File: docs/getting-started/interactive.py

import dash_email as de
import dash_mantine_components as dmc
from dash import Input, Output, callback

component = dmc.Stack([
    dmc.TextInput(
        id="gs-headline-input",
        label="Headline",
        value="Hello from Dash Email",
        maw=400,
    ),
    de.Email([
        de.EmailBody(
            style={"backgroundColor": "#f6f9fc", "padding": "24px 0"},
            children=[
                de.EmailContainer([
                    de.EmailSection(
                        style={
                            "backgroundColor": "#ffffff",
                            "borderRadius": "8px",
                            "padding": "32px",
                        },
                        children=[
                            de.EmailHeading(
                                "Hello from Dash Email",
                                id="gs-headline-output",
                                as_="h2",
                            ),
                            de.EmailText(
                                "Email components are regular Dash components — "
                                "drive them with callbacks like anything else."
                            ),
                        ],
                    )
                ])
            ],
        )
    ]),
], gap="md")


@callback(
    Output("gs-headline-output", "children"),
    Input("gs-headline-input", "value"),
)
def update_headline(value):
    return value or "Hello from Dash Email"
```


---

### The component set

| Category | Components |
|----------|------------|
| Structure | `Email`, `EmailHead`, `EmailPreview`, `EmailBody` |
| Layout    | `EmailContainer`, `EmailSection`, `EmailRow`, `EmailColumn` |
| Content   | `EmailHeading`, `EmailText`, `EmailButton`, `EmailLink` |
| Media     | `EmailImage`, `EmailDivider`, `EmailFont` |

---

### Styling rules for email


    Email clients strip `<style>` tags and ignore most modern CSS. dash-email
    components accept a `style` prop with camelCase CSS that is rendered inline —
    stick to inline styles, table-based layout (`EmailRow`/`EmailColumn`), and
    keep content width at 600px or less.

---

### Next steps

- Explore each component group in the sidebar — every page has isolated, runnable examples.
- Open the **Email Builder** to generate templates with AI, preview them live, and send test emails via Resend.


---

*Source: /getting-started*