0
Sponsor

Theming

PreviousNext

Email themes and fonts for React Email and MJML React.

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

Install a theme

Themes are registry items named theme-<id>:

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

Or paste the JSON URL:

$ pnpm dlx shadcn@latest add https://emailcn.com/r/theme-linear.json

Use with React Email

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

Use with MJML

MJML components use theme tokens directly:

import { defaultTheme } from "@/registry/bases/mjml-react/themes/default";
<Hero theme={defaultTheme} />

Available themes

Airbnb ThemeDefault ThemeGitHub ThemeLinear ThemeNotion ThemeRaycast ThemeSlack ThemeStripe ThemeTwitch ThemeVercel Theme

Available Fonts (React Email only)

Fonts