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