5
Sponsor

Utility

PreviousNext

Utility Footer rendered with email-safe, renderer-native components.

React EmailMJML ReactJSX Email
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { defaultTheme } from "@/components/email/theme-default";

export function UtilityFooterDemo() {
  return (
    <UtilityFooter
      content="socials"
      alignment="center"
      columns={1}
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation

$ pnpm dlx shadcn@latest add @emailcn/mjml-react/utility-footer

Usage

import { UtilityFooter } from "@/components/email/utility-footer";
<UtilityFooter content="socials" alignment="center" columns={1} />

Examples

Footer with app store buttons

centered

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAppStoresColumns1ExampleDemo() {
  return <UtilityFooter content="app-stores" columns={1} />;
}

two columns

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAppStoresColumns2ExampleDemo() {
  return <UtilityFooter content="app-stores" columns={2} />;
}

with title

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAppStoresColumns1TitleExampleDemo() {
  return (
    <UtilityFooter content="app-stores" columns={1} title="Download our app" />
  );
}

Footer with background image

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImageContentLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-content"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImage2ColumnMenuLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-2-column-menu"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImage2ColumnMenuLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-2-column-menu"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImage3ColumnMenuLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-3-column-menu"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImage3ColumnMenuLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-3-column-menu"
      logoPosition="right"
    />
  );
}

bottom image centered

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImageCenteredLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-centered"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionBottomVariantBottomImageContentLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "bottom",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="bottom-image-content"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImage3ColumnMenuLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-3-column-menu"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImage3ColumnMenuLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-3-column-menu"
      logoPosition="right"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageAddressLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-address"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageAddressLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-address"
      logoPosition="right"
    />
  );
}

top image centered

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageCenteredLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-centered"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageContentLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-content"
      logoPosition="left"
    />
  );
}
Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageContentLogoPositionRightExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-content"
      logoPosition="right"
    />
  );
}

top image logo bottom

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";
import { emailAsset } from "@/components/email/email-assets";

export function UtilityFooterBackgroundImagePositionTopVariantTopImageLogoBottomLogoPositionLeftExampleDemo() {
  return (
    <UtilityFooter
      backgroundImage={{
        position: "top",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
      variant="top-image-logo-bottom"
      logoPosition="left"
    />
  );
}

Footer with company locations

stacked

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentLocationsColumns1ExampleDemo() {
  return <UtilityFooter content="locations" columns={1} />;
}

grid

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentLocationsColumns2ExampleDemo() {
  return <UtilityFooter content="locations" columns={2} />;
}

Footer with legal text

default

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentLegalExampleDemo() {
  return <UtilityFooter content="legal" />;
}

Footer with social icons and address

left

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAddressAlignmentLeftExampleDemo() {
  return <UtilityFooter content="address" alignment="left" />;
}

center

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAddressAlignmentCenterExampleDemo() {
  return <UtilityFooter content="address" alignment="center" />;
}

right

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentAddressAlignmentRightExampleDemo() {
  return <UtilityFooter content="address" alignment="right" />;
}

Simple footer with social icons

left

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentSocialsAlignmentLeftExampleDemo() {
  return <UtilityFooter content="socials" alignment="left" />;
}

center

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentSocialsAlignmentCenterColumns1ExampleDemo() {
  return <UtilityFooter content="socials" alignment="center" columns={1} />;
}

right

Open preview in new tab
import { UtilityFooter } from "@/components/email/utility-footer";

export function UtilityFooterContentSocialsAlignmentRightExampleDemo() {
  return <UtilityFooter content="socials" alignment="right" />;
}

API Reference

PropTypeDefaultDescription
themeEmailThemedefaultThemeRenderer theme configuration.
brand{ logo: { src: string; alt?: string }; href?: string }-Configures the component's brand.
socialsArray<{ iconSrc: string; label: string; href: string }>-Configures the component's socials.
legal{ copyright?: string; text?: string; unsubscribeHref?: string; preferencesHref?: string }-Configures the component's legal.
content"socials" | "address" | "legal" | "locations" | "app-stores""socials"Configures the component's content.
locationsArray<{ name: string; address: string }>-Configures the component's locations.
addressstring"© 2026 emailcn\nemailcn | 155 Bdv Saint Germain | 75505 Paris"Configures the component's address.
titlestring"Follow us"Configures the component's title.
alignment"left" | "center" | "right""center"Configures the component's alignment.
columns1 | 21Configures the component's columns.
logoPosition"left" | "right""left"Positions the logo in supported layouts.
backgroundImage{ src: string; alt?: string; position?: "top" | "bottom" }-Configures the component's backgroundimage.
variant"centered" | "two-columns" | "with-title" | "bottom-image-content" | "bottom-image-2-column-menu" | "bottom-image-3-column-menu" | "bottom-image-centered" | "top-image-content" | "top-image-3-column-menu" | "top-image-address" | "top-image-centered" | "top-image-logo-bottom" | "stacked" | "grid" | "left-logo" | "right-logo" | "left-aligned" | "right-aligned"Derived from the other propsSelects an exact legacy composition when needed.