# Email Kit

Shared email layout and theme for transactional emails that match the app's theme preset.

- id: `email-kit`
- Page: https://agentic-ui-kit.com/components/email-kit
- Live preview: https://agentic-ui-kit.com/live/component/email-kit

## Install

```bash
agentic-ui add email-kit
npx shadcn@4.17.0 add @agentic-ui/email-kit
```

## Metadata

- **Level:** email
- **Category:** email
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** email-layout, bulletproof-button, email-theme-mapping, theme-presets, dark-mode-email, outlook-dark-mode, plain-text-builder, preheader, kpi-row, line-items-table, usage-bar, callout, one-time-code, aa-contrast
- **Intents:** communicate, configure
- **Suits domains:** saas, marketing, billing, auth
- **Interaction:** click
- **Screen role:** communication
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** shared email layout and theme for transactional emails that match the app's theme preset, turn my design tokens or theme into email-safe inline colours with dark mode for React Email, bulletproof email button and email footer with unsubscribe link for React Email templates
- **Avoid when:** in-app UI (use the kit's components), a hosted email builder already owns the layout
- **Preserve when adapting:** aa-contrast-fixes, presentation-tables, dark-mode-classes
- **Replace when adapting:** brand, footer, theme
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @react-email/render
- **npm dependencies (registry):** @react-email/render@^2.1.0