1
Sponsor

Theming

PreviousNext

Email themes and fonts for React Email, MJML React, and JSX Email.

Theming in emailcn supports two approaches: React Email uses Tailwind-based theme files that power <Tailwind config={theme}>. MJML React and JSX Email components use EmailThemeTokens directly.

Install a theme

Themes are registry items named theme-<id> (the same name in every style):

$ pnpm dlx shadcn@latest add @emailcn/theme-default

Or paste the per-style JSON URL:

$ pnpm dlx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-linear.json

Use with React Email

import { Tailwind } from "react-email";
import { defaultTheme } from "@/components/emails/themes/theme-default";
<Tailwind config={defaultTheme}>{/* ... */}</Tailwind>

Use with MJML React or JSX Email

These styles use theme tokens directly:

import { defaultTheme } from "@/components/emails/themes/theme-default";
<MjmlText color={defaultTheme.colorText}>Hello</MjmlText>

Available themes

Airbnb ThemeDefault ThemeGitHub ThemeLinear ThemeNotion ThemeRaycast ThemeSlack ThemeStripe ThemeTwitch ThemeVercel Theme

Available Fonts (React Email and JSX Email)

Fonts