/
132
Sponsor

Installation

Previous

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

Prerequisites

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

Configure the @emailcn namespace first, then select the framework in the item path — see Registry.

Installation

Run the following command to add any component or block:

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

Usage

Import and use the component:

import { OnboardingDefault } from "@/components/email/onboarding-default";
 
export function WelcomeEmail() {
  return <OnboardingDefault _firstName="Ada" _productName="Acme" />;
}

Components install with a *Section export you can compose inside your own document (React Email style shown):

import { Body, Container, Head, Html, Preview, Tailwind } from "react-email";
import { createEmailTailwindConfig } from "@/components/email/email-theme";
import { DefaultFonts } from "@/components/email/font-default";
import { defaultTheme } from "@/components/email/theme-default";
import { ButtonsSection } from "@/components/email/buttons";
 
export function WelcomeEmail() {
  return (
    <Html>
      <Head>
        <DefaultFonts />
      </Head>
      <Preview>Welcome</Preview>
      <Tailwind config={createEmailTailwindConfig(defaultTheme)}>
        <Body className="bg-background font-sans">
          <Container className="mx-auto max-w-container">
            <ButtonsSection label="Get Started" href="https://example.com" />
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

For registry URLs and namespace configuration, see Registry.