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