Themes
Ecommerce
UI Elements
Installation
$ pnpm dlx shadcn@latest add @emailcn/theme-default
Usage
import { Tailwind } from "react-email";
import { defaultTheme } from "@/components/emails/themes/default";
<Tailwind config={defaultTheme}>{/* Your email content */}</Tailwind>;Theme Tokens
| Token | Value |
|---|---|
colorPrimary | #111827 |
colorBackground | #ffffff |
colorText | #111827 |
colorTextMuted | #6b7280 |
colorBorder | #e5e7eb |
fontFamily | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif |
borderRadius | 6px |
containerWidth | 600px |
Button Styles
Primary Button
| Property | Value |
|---|---|
| Background | #111827 |
| Text | #ffffff |
| Border Radius | 6px |
| Padding | 24px x 12px |
| Font Size | 14px |
| Font Weight | 500 |
Secondary Button
| Property | Value |
|---|---|
| Background | transparent |
| Text | #111827 |
| Border | 1px solid #e5e7eb |
| Border Radius | 6px |
| Padding | 24px x 12px |
| Font Size | 14px |
| Font Weight | 500 |