1
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.
  • JSX Email templates: a project with jsx-email installed.

Configure the @emailcn namespace for your preferred style first — see Registry.

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 { OnboardingDefault } from "@/components/emails/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 { DefaultFonts } from "@/components/emails/fonts/default";
import { defaultTheme } from "@/components/emails/themes/theme-default";
import { ButtonsSection } from "@/components/emails/ui-elements/buttons/buttons";
 
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">
            <ButtonsSection label="Get Started" href="https://example.com" />
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

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