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.

Background Image Footer

Nine background-image footer families consolidated into layout and logo-position variants

React Email MJML React JSX Email

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Installation


$ pnpm dlx shadcn@latest add @emailcn/footer-with-background-image

Usage

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";

<FooterWithBackgroundImage
  {...FooterWithBackgroundImage.PreviewProps}
  variant="top-image-content"
  logoPosition="left"
/>

Examples

Content Top, Image Bottom — Right Logo

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Centered Content, Image Bottom

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Content Bottom — Left Logo

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Content Bottom — Right Logo

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Address — Left Logo

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Address — Right Logo

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Centered Content

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

Image Top, Logo Bottom

import { FooterWithBackgroundImage } from "@/components/email/footer-with-background-image";
import type { FooterWithBackgroundImageVariant } from "@/components/email/footer-with-background-image";

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

API Reference

Prop	Type	Default	Description
`variant`	`FooterWithBackgroundImageVariant`	`"bottom-image-content"`	Selects the content shell
`logoPosition`	`"left" \| "right"`	`"left"`	Mirrors supported layouts
`theme`	`EmailTheme`	default theme	Email theme styling

App Store Buttons Footer Overlapped CTA Footer

On This Page

Installation Usage Examples Content Top, Image Bottom — Right Logo 2-Column Menu, Image Bottom — Left Logo 2-Column Menu, Image Bottom — Right Logo 3-Column Menu, Image Bottom — Left Logo 3-Column Menu, Image Bottom — Right Logo Centered Content, Image Bottom Image Top, Content Bottom — Left Logo Image Top, Content Bottom — Right Logo Image Top, 3-Column Menu — Left Logo Image Top, 3-Column Menu — Right Logo Image Top, Address — Left Logo Image Top, Address — Right Logo Image Top, Centered Content Image Top, Logo Bottom API Reference

Edit this page Follow @shadcnlabs Join community