0
Sponsor

Installation

PreviousNext

Install email components, blocks, themes, and font helpers from the emailcn registry.

Prerequisites

  • React Email templates: a project with react-email installed.
  • MJML templates: a project with @faire/mjml-react installed.

Installation

Run the following command to add any component or block:

$ pnpm dlx shadcn@latest add @emailcn/block-onboarding-default

Usage

Import and use the component:

import { Hero } from "@/components/emails/hero";
 
export function WelcomeEmail() {
  return <Hero heading="Welcome!" subheading="Thanks for joining us." />;
}

Compose with one outer document and components:

import { Body, Container, Head, Html, Preview, Tailwind } from "react-email";
import { DefaultFonts } from "@/components/emails/fonts/default";
import { FooterSection } from "@/components/emails/footer";
import { HeroSection } from "@/components/emails/hero";
import { defaultTheme } from "@/components/emails/themes/default";
 
export function WelcomeEmail() {
  return (
    <Html>
      <Head>
        <DefaultFonts />
      </Head>
      <Preview>Welcome</Preview>
      <Tailwind config={defaultTheme}>
        <Body className="bg-background font-sans">
          <Container className="mx-auto max-w-container">
            <HeroSection
              heading="Welcome!"
              subheading="Thanks for joining us."
            />
            <FooterSection companyName="Acme" />
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

For theming and font presets, see Theming and for registry URLs, see Registry.