A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Overlapped CTA Footer

Seven overlapped-CTA footer families consolidated into content-layout variants

React Email MJML React JSX Email

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/footer-with-overlapped-cta

Usage

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";

<FooterWithOverlappedCta
  {...FooterWithOverlappedCta.PreviewProps}
  variant="content"
  logoPosition="left"
/>

Examples

Content — Right Logo

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

Centered Content

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

Address — Left Logo

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

Address — Right Logo

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

import { FooterWithOverlappedCta } from "@/components/email/footer-with-overlapped-cta";
import type { FooterWithOverlappedCtaVariant } from "@/components/email/footer-with-overlapped-cta";

export function FooterWithOverlappedCtaDemo({
  variant = "content",
}: {
  variant?: string;
}) {
  const logoPosition = variant.endsWith("-right-logo") ? "right" : "left";
  const componentVariant = variant.replace(
    /-(left|right)-logo$/,
    ""
  ) as FooterWithOverlappedCtaVariant;
  return (
    <FooterWithOverlappedCta
      {...FooterWithOverlappedCta.PreviewProps}
      logoPosition={logoPosition}
      variant={componentVariant}
    />
  );
}

API Reference

Prop	Type	Default	Description
`variant`	`FooterWithOverlappedCtaVariant`	`"content"`	Selects the lower layout
`logoPosition`	`"left" \| "right"`	`"left"`	Mirrors supported layouts
`theme`	`EmailTheme`	default theme	Email theme styling

Background Image Footer Large Title and Buttons Footer

On This Page

Installation Usage Examples Content — Right Logo 2-Column Menu — Left Logo 2-Column Menu — Right Logo 3-Column Menu — Left Logo 3-Column Menu — Right Logo Centered Content Centered Menu Address — Left Logo Address — Right Logo Centered Social Icons API Reference

Edit this page Follow @shadcnlabs Join community