Skip to content

Kits

Email

Beta

React Email compositions with Control UI colors and typography: contained or plain surfaces, column layouts, themed markdown and code, and a footer with social icons, address, and unsubscribe parts.

Examples

Announcement

Centered marketing send: logo masthead, hero image, a three-column highlight row, and a centered footer.

Release notes

Versioned changelog bullets plus an EmailMarkdown migration note and a themed EmailCodeBlock snippet.

Image and text

Two-column EmailColumns layout with a percentage-width image beside the story.

Summary

Metric row centered inside a panel, above EmailDetailRow lines for a recurring digest.

Verification code

Centered transactional send: EmailOneTimeCode for the code, and a footer that identifies the sender without an unsubscribe link.

Receipt

Compact heading, an EmailInlineCode order number, and order lines with an emphasized total inside an EmailPanel.

Composition

Email layout

Img comes from React Email. EmailColumns stacks its columns on narrow screens.

<EmailLayout>
- <EmailHeader>
  - <EmailLogo />
  - <EmailBrowserLink />
  </EmailHeader>
- <EmailSection>
  - <EmailHeading />
  - <EmailText>
    - <EmailLink />
    - <EmailInlineCode />
    </EmailText>
  - <EmailPanel>
    - <EmailDetailRow />
    - <EmailDivider />
    </EmailPanel>
  - <EmailBulletList />
  - <EmailOneTimeCode />
  - <EmailMarkdown />
  - <EmailCodeBlock />
  - <EmailButton />
  </EmailSection>
- <EmailColumns>
  - <Img />
  - <EmailSection />
  </EmailColumns>
</EmailLayout>

Footer

EmailUnsubscribe belongs to marketing sends; transactional messages keep the sender identity and address only.

<EmailFooter>
- <EmailSocialLinks>
  - <EmailMutedLink />
  </EmailSocialLinks>
- <EmailFooterLinks />
- <EmailCaption />
- <EmailAddress />
- <EmailUnsubscribe />
- <EmailFooterLegal />
</EmailFooter>

Installation

Use this command to install the component.

Registry command

npx shadcn@latest add https://control-ui.dev/r/email.json

See registry manifest

Usage

import { Font, render, toPlainText } from "react-email";

import type { EmailBrand, EmailFooterContent } from "@/components/control-ui/email/email-brand";

import { NewsletterEmail } from "@/components/control-ui/email/templates";

import { emailThemeFromCss } from "@/components/control-ui/email/theme";

const brand: EmailBrand = { name: "Your company", homeUrl: "https://your-company.com" };

const brandFont = (

<Font

fontFamily="Inter"

fallbackFontFamily="Helvetica"

webFont={{ url: "https://your-company.com/fonts/inter.woff2", format: "woff2" }}

/>

);

function newsletterFooter(unsubscribeUrl: string): EmailFooterContent {

return {

tagline: "Product notes from the team.",

align: "center",

socialIconBaseUrl: "https://your-company.com/email/social",

socialLinks: [

{ platform: "linkedin", href: "https://your-company.com/linkedin" },

{ platform: "youtube", href: "https://your-company.com/youtube" },

],

helpLinks: [

{ label: "Help center", href: "https://your-company.com/help" },

{ label: "Privacy", href: "https://your-company.com/privacy" },

],

    sender: { company: "Your Company, Inc.", addressLines: ["1 Market Street, Suite 200", "San Francisco, CA 94105", "United States"] },

reason: "You receive this email because you subscribed to product updates.",

legal: "© 2026 Your Company, Inc. All rights reserved.",

mailing: "marketing",

unsubscribeUrl,

preferencesUrl: "https://your-company.com/email-preferences",

};

}

export async function renderNewsletter({

coreThemeCss,

codeThemeCss,

skinThemeCss,

overrideCss,

browserUrl,

unsubscribeUrl,

articles,

}: {

coreThemeCss: string;

codeThemeCss: string;

skinThemeCss: string;

overrideCss: string;

browserUrl: string;

unsubscribeUrl: string;

articles: Parameters<typeof NewsletterEmail>[0]["articles"];

}) {

const theme = emailThemeFromCss([coreThemeCss, codeThemeCss, skinThemeCss, overrideCss], "light");

const html = await render(

<NewsletterEmail

theme={theme}

variant="plain"

head={brandFont}

brand={brand}

browserUrl={browserUrl}

footer={newsletterFooter(unsubscribeUrl)}

articles={articles}

/>,

);

return {

html,

text: toPlainText(html),

headers: { "List-Unsubscribe": `<${unsubscribeUrl}>`, "List-Unsubscribe-Post": "List-Unsubscribe=One-Click" },

};

}

Dependencies

Email guidesrc/registry/sources/control-ui/email/README.mdSupport

Brand header and footersrc/registry/sources/control-ui/email/email-brand.tsxSupport

Markdown and codesrc/registry/sources/control-ui/email/email-code.tsxSupport

Footer partssrc/registry/sources/control-ui/email/email-footer.tsxSupport

Lengthsrc/registry/sources/control-ui/email/length.tsSupport

Eight email templatessrc/registry/sources/control-ui/email/templates.tsxSupport

Theme adaptersrc/registry/sources/control-ui/email/theme.tsSupport

Raw code

Installed component source and support files

src/registry/sources/control-ui/email/email.tsx

import type { ReactNode } from "react";

import {

Body,

Button,

type ButtonProps,

Column,

Container,

Head,

Heading,

type HeadingProps,

Hr,

type HrProps,

Html,

Link,

type LinkProps,

Preview,

pixelBasedPreset,

Row,

Section,

type SectionProps,

Tailwind,

type TailwindConfig,

Text,

type TextProps,

} from "react-email";

import type { EmailTheme } from "./theme";

export type EmailVariant = "contained" | "plain";

export type EmailFooterPlacement = "inside" | "outside";

export type EmailDirection = "ltr" | "rtl";

const physicalSides = {

ltr: { start: "left", end: "right" },

rtl: { start: "right", end: "left" },

} as const;

export type EmailSides = (typeof physicalSides)[EmailDirection];

export function emailSides(dir: EmailDirection = "ltr"): EmailSides {

return physicalSides[dir];

}

export function surfaceColors(theme: EmailTheme, variant: EmailVariant) {

if (variant === "contained") return theme.colors;

return { ...theme.colors, card: theme.colors.background, "card-foreground": theme.colors.foreground };

}

function tailwindTheme(theme: EmailTheme, variant: EmailVariant): TailwindConfig {

return {

presets: [pixelBasedPreset],

theme: {

extend: {

colors: surfaceColors(theme, variant),

borderRadius: theme.radii,

minHeight: { control: theme.button.height },

padding: { "control-x": theme.button.paddingInline, "control-y": theme.button.paddingBlock },

fontFamily: { body: theme.fonts.body, display: theme.fonts.display, mono: theme.fonts.mono },

fontSize: {

          ...Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]])),

control: [theme.button.fontSize, { lineHeight: theme.button.lineHeight }],

},

},

},

};

}

export function EmailLayout({

theme,

preview,

children,

footer,

footerPlacement = "inside",

head,

lang = "en",

dir = "ltr",

variant = "contained",

}: {

theme: EmailTheme;

preview: string;

children: ReactNode;

footer?: ReactNode;

footerPlacement?: EmailFooterPlacement;

head?: ReactNode;

lang?: string;

dir?: EmailDirection;

variant?: EmailVariant;

}) {

const contained = variant === "contained";

const outside = contained && footerPlacement === "outside";

const backdrop = theme.colorScheme === "light" ? "bg-muted" : "bg-background";

return (

<Html lang={lang} dir={dir}>

<Tailwind config={tailwindTheme(theme, variant)}>

<Head>

<meta name="color-scheme" content={theme.colorScheme} />

<meta name="supported-color-schemes" content={theme.colorScheme} />

{head}

</Head>

        <Body className={`m-0 font-body text-body text-foreground ${contained ? `${backdrop} px-4 py-8` : "bg-background p-0"}`}>

<Preview>{preview}</Preview>

<Container

            className={`mx-auto w-full max-w-[600px] bg-card text-card-foreground ${contained ? "rounded-panel border border-border border-solid p-6" : "px-6 py-8"}`}

>

{children}

{outside ? null : footer}

</Container>

{outside ? <Container className="mx-auto w-full max-w-[600px] px-6">{footer}</Container> : null}

</Body>

</Tailwind>

</Html>

);

}

export type EmailAlign = "start" | "center" | "end";

const alignClasses = { left: "text-left", center: "text-center", right: "text-right" };

export function emailAlignClass(align: EmailAlign | undefined, dir: EmailDirection = "ltr") {

if (!align) return "";

return alignClasses[align === "center" ? "center" : emailSides(dir)[align]];

}

const headingSizeClasses = {

display: "text-display",

"heading-1": "text-heading-1",

"heading-2": "text-heading-2",

"heading-3": "text-heading-3",

"heading-4": "text-heading-4",

};

type EmailHeadingSize = keyof typeof headingSizeClasses;

const headingSizeForTag = { h1: "heading-1", h2: "heading-2", h3: "heading-3", h4: "heading-4" } as const;

export function EmailHeading({

as = "h1",

size,

align,

dir,

className = "",

...props

}: Omit<HeadingProps, "as" | "dir"> & {

as?: keyof typeof headingSizeForTag;

size?: EmailHeadingSize;

align?: EmailAlign;

dir?: EmailDirection;

}) {

const sizeClass = headingSizeClasses[size ?? headingSizeForTag[as]];

return (

<Heading

{...props}

as={as}

className={`mb-4 mt-0 font-display text-card-foreground ${sizeClass} ${emailAlignClass(align, dir)} ${className}`}

/>

);

}

export function EmailSection({

align,

dir,

className = "",

...props

}: Omit<SectionProps, "dir"> & { align?: EmailAlign; dir?: EmailDirection }) {

return <Section {...props} className={`${emailAlignClass(align, dir)} ${className}`} />;

}

export function EmailText({

tone = "default",

align,

dir,

className = "",

style,

...props

}: Omit<TextProps, "dir"> & { tone?: "default" | "muted"; align?: EmailAlign; dir?: EmailDirection }) {

const textColor = tone === "muted" ? "text-muted-foreground" : "text-card-foreground";

return (

<Text

{...props}

style={{ overflowWrap: "break-word", ...style }}

className={`mb-4 mt-0 font-body text-body ${textColor} ${emailAlignClass(align, dir)} ${className}`}

/>

);

}

export function EmailButton({ width = "auto", className = "", ...props }: ButtonProps & { width?: "auto" | "full" }) {

const widthClass = width === "full" ? "block w-full" : "inline-block";

return (

<Button

{...props}

      className={`box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${widthClass} ${className}`}

/>

);

}

export function EmailLink({ className = "", ...props }: LinkProps) {

return <Link {...props} className={`font-body text-primary-text underline ${className}`} />;

}

export function EmailCaption({

eyebrow = false,

className = "",

...props

}: Omit<TextProps, "dir"> & { align?: EmailAlign; dir?: EmailDirection; eyebrow?: boolean }) {

  return <EmailText tone="muted" {...props} className={`text-caption ${eyebrow ? "uppercase tracking-[0.08em]" : ""} ${className}`} />;

}

export function EmailMutedLink({ className = "", ...props }: LinkProps) {

return <EmailLink {...props} className={`text-caption text-muted-foreground ${className}`} />;

}

export function EmailDivider({ className = "", ...props }: HrProps) {

return <Hr {...props} className={`my-6 border-0 border-t border-solid border-t-border ${className}`} />;

}

export function EmailPanel({ className = "", ...props }: SectionProps) {

return <Section {...props} className={`my-6 rounded-panel bg-muted p-5 ${className}`} />;

}

export function EmailOneTimeCode({ children, className = "" }: { children: ReactNode; className?: string }) {

return (

<EmailPanel className={`text-center ${className}`}>

      <EmailText className="mb-0 text-center font-mono text-heading-2 font-semibold tracking-[0.25em]">{children}</EmailText>

</EmailPanel>

);

}

const listIndentClasses = { left: "pl-5", right: "pr-5" };

export function EmailBulletList({ items, dir, className = "" }: { items: ReactNode[]; dir?: EmailDirection; className?: string }) {

if (items.length === 0) return null;

return (

    <ul className={`mb-4 mt-0 list-disc ${listIndentClasses[emailSides(dir).start]} font-body text-body text-card-foreground ${className}`}>

{items.map((item, index) => (

// biome-ignore lint/suspicious/noArrayIndexKey: list entries are positional content with no stable identity.

<li key={index} className="mb-1 font-body text-body text-card-foreground">

{item}

</li>

))}

</ul>

);

}

export function EmailColumns({

children,

widths,

gap = 20,

verticalAlign = "top",

dir,

className = "",

}: {

children: ReactNode[];

widths?: string[];

gap?: number;

verticalAlign?: "top" | "middle" | "bottom";

dir?: EmailDirection;

className?: string;

}) {

const sides = emailSides(dir);

if (children.length === 0) return null;

const evenWidth = `${(100 / children.length).toFixed(4)}%`;

return (

<Row className={`mb-6 table-fixed ${className}`}>

{children.map((child, index) => {

const inset = index === 0 ? 0 : gap;

return (

<Column

// biome-ignore lint/suspicious/noArrayIndexKey: columns are positional slots with no stable identity.

key={index}

width={widths?.[index] ?? evenWidth}

            className={`max-[480px]:block max-[480px]:w-full max-[480px]:px-0 ${index === 0 ? "" : `max-[480px]:pt-[${gap}px]`}`}

style={{ verticalAlign, ...(sides.start === "left" ? { paddingLeft: inset } : { paddingRight: inset }) }}

>

{child}

</Column>

);

})}

</Row>

);

}

export function EmailDetailRow({

label,

value,

emphasis = false,

dir,

}: {

label: ReactNode;

value: ReactNode;

emphasis?: boolean;

dir?: EmailDirection;

}) {

const sides = emailSides(dir);

const valueWeight = emphasis ? "font-semibold" : "";

return (

<Row className="table-fixed">

<Column className="align-top">

<EmailText className="mb-2">{label}</EmailText>

</Column>

<Column align={sides.end} className="align-top">

<EmailText className={`mb-2 ${valueWeight}`}>{value}</EmailText>

</Column>

</Row>

);

}